Javascript 滚动条上的粘性导航条（JS、HTML、CSS）

我正在建设这个网站作为一个有趣的小项目，但我卡住了。一旦用户向下滚动足够远，我的粘性导航条就会跳转。我读过其他的文章，不能很好地把这些点联系起来

我一直认为这一定是一个填充问题，然而，我的JS并不是那么好，所以也有潜在的问题

以下是我的Javascript：

var header = document.getElementById("header");
var navbar = document.getElementById("navbar");

var navbarHeight = navbar.offsetHeight;
var headerHeight = header.offsetHeight;

header.style.height = screen.height - navbarHeight;

function initJake() {
  if (window.pageYOffset > headerHeight) {
    navbar.style.position = "fixed";
    navbar.style.top = "0";

  } else {
    navbar.style.position = "relative";
  }
}
window.onscroll = function() {
  initJake()
};

这是我的JSFIDLE（由于这是全屏HTML设置，链接被切断）：

我希望能找到一种方法，使从绝对到固定的过渡变得平滑，并且不会覆盖一大堆文本

---

感谢任何愿意提供建议的人，这个小问题已经成为一个相当令人头痛的问题。

这就是你的意思吗

var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var content = document.querySelector('#navbar + .content');



var navbarHeight = navbar.offsetHeight;
var headerHeight = header.offsetHeight;

header.style.height = screen.height-navbarHeight;

function initJake(){

    if(window.pageYOffset > headerHeight){

    navbar.style.position = "fixed";
    navbar.style.top = "0";
    content.style.padding = '60px 0 0 0';

}
else{

    navbar.style.position = "relative";
  content.style.padding = '0 0 0 0';

}

}


function hamburgerMenu() {
  var x = document.getElementById("submenu");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 



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

---

这里的问题是，您的导航栏的位置是“固定”的，DOM不再考虑它的高度，因为它将被定位在所有内容的“顶部”。解决此问题的最佳方法是为其后面的元素（本例中的内容）提供与navbar具有相同高度的填充顶部。（与我不同，使用一个变量来获取导航栏的高度，因为它的高度可以变化，而不是像我那样的固定数字（60px））

这是你的错误

if (window.pageYOffset > headerHeight) {
    navbar.style.position = "fixed";
    navbar.style.top = "0";
  } else {
    navbar.style.position = "relative"; // here 

  }

您的

导航栏

具有位置

绝对

，当

window.pageYOffset>headerHeight

为false时，您将其设置为相对

#导航栏{
位置：绝对位置；
底部：0；
宽度：100%；
背景色：#111；
z指数：3；
溢出：隐藏；
身高：20%；
垫底：3%；
显示器：flex；
弯曲方向：立柱；
过渡特性：宽度；
}

这就是为什么会发生碰撞。此外，导航栏现在已修复，因此不会干扰其他元素。这就是为什么这个div被导航条覆盖（或者向上）

此处文本
文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本

可能的解决办法是我们坚持一个立场。让我们把它变成相对的。然后，当位置固定时，我们将边距顶部添加到

内容

div。这使得它离上面有一段距离。因此javascript变得

var content = document.getElementsByClassName("content")[0];
if (window.pageYOffset > headerHeight) {

    navbar.style.position = "fixed";
    navbar.style.top = "0";
    content.style.marginTop = " 115px";
  } else {

    navbar.style.position = "relative";
    content.style.marginTop = "0px";

  }

并坚持css中的

relative

#导航栏{
位置：相对位置；
...
}

---

那么你们为什么总是使用JS与HTML对象的外观交互呢

使用JS检查标题是否在视口之外，如果是，则在主体上设置一个类。通过CSS，您可以修改粘性标题。 大概是这样的：

$(window).scroll(function(){
  if($(this).scrollTop() > $('#header').outerHeight()){ 
    $('body').addClass('scrolled');
  } else {
    $('body').removeClass('scrolled');
  }
});

并通过CSS

#header { position:relative; }
body.scrolled #header { position:fixed; top:0; left:0; width:100%; }
body.scrolled { padding-top:<Enter here Height of Header to prevent jumping> }

#头{位置：相对；}
body.scrolled#标题{位置：固定；顶部：0；左侧：0；宽度：100%；}
body.scrolled{padding top:}

您需要支持IE吗？因为如果没有，您可以使用CSS属性

position:sticky

来为您处理这个问题，而不是尝试在JS中重新创建它。谢谢你的建议。我用jQuery写的。但是你可以把它翻译成原生的JS。事后诸葛亮20/20，这是一件非常愚蠢的事情。这很有效。我最终使用了一个变量来获得Daniel van der Velden建议的边距高度，现在一切都很顺利。非常感谢您的支持！谢谢，丹尼尔·范德维尔登！替代像素值的变量是未来的发展方向。