css 如何让这段代码在同一个页面上处理多个粘性导航栏?

krugob8w  于 2022-12-01  发布在  其他
关注(0)|答案(1)|浏览(144)

我使用这个JS解决方案来使导航条在向下滚动页面时具有粘性。问题是,我在页面上有多个标签页,每个标签页都有相同的导航条。因此,这个解决方案只使第一个导航条具有粘性。有没有办法使所有标签页都具有粘性?
在这段代码中,我通过类名查找对象(这是有意的,我需要使用类名搜索,而不是ID),但它找到了第一个具有该类名称的对象,因此忽略了其余的对象。我如何修改这段代码,使它可以处理许多具有相同类名的对象?我在页面的不同标签中复制了几次此导航栏,使类名相同。
第一个

rryofs0p

rryofs0p1#

看起来主要的问题是你显式地抓取了第一个导航栏并应用了粘性逻辑。相反,你需要迭代所有的导航栏并在循环中应用你的逻辑,如下所示:

// Get the navbars
var navbararray = document.querySelectorAll(".sticky-navbar");

// rather than only operating on a single navbar, pass the whole array
window.onscroll = function () { myFunction(navbararray) };

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction(navbararray) {
  navbararray.forEach(navbar => {

  //Get the inner container
  var innercontainerarray = document.getElementsByClassName("future-page-wrapper");
  var innercontainer = innercontainerarray[0];

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop;

  if (window.pageYOffset >= sticky + 250) {
    navbar.classList.add("sticky");
    innercontainer.classList.add("page-wrapper");
  } else {
    navbar.classList.remove("sticky");
    innercontainer.classList.remove("page-wrapper");
  }

  });
}
  • Edit *:一点额外的信息--我没有使用getElementsByClassName,而是使用了document.querySelectorAll('.sticky-navbar')。这将为您提供一个包含上述类的所有对象的非活动数组(文档here

相关问题