时间戳

首页 > 解决方案 > 滚动上的粘性导航>为页面内容添加类

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

问题描述

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

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");
  }
}

此脚本将类粘性添加到导航。我想在此函数中将“填充页面”类添加到“页面内容”类（也将其删除） - 因为粘性导航不再是相对的，并且“页面内容”跳到顶部多 48 像素。

标签： htmljquerycssonscroll

解决方案

找到了解决方案：

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 :) 完美

推荐阅读