滚动上的粘性导航 > 为页面内容添加类

问题描述

我正在使用脚本并想对其进行调整 - 但它不起作用。所以也许有人可以帮助我。脚本：

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky");
  } else {
    navigation.classList.remove("sticky");
  }
}

此脚本将粘性类添加到导航中。我想在这个函数中将“padding-page”类添加到“page-content”类中（也删除它）——因为粘性导航不再是相对的，并且“页面内容”跳转到顶部 48px。

解决方法

请试试这个。

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky padding-page");
  } else {
    navigation.classList.remove("sticky padding-page");
  }
}

找到解决办法：

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var welcome = document.getElementById("welcome");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky"); welcome.classList.add("padding-page");
  } else {
    navigation.classList.remove("sticky"); welcome.classList.remove("padding-page");
  }
}

刚刚为第一个内容创建了一个 id 并为此添加了 padding-page :) 完美

html jquery onscroll