粘性导航栏在滚动上跳转(JS，HTML，CSS)

Question

我正在把这个网站作为一个有趣的小项目来建设，但我被卡住了。一旦用户向下滚动足够远，我的粘性导航栏就会跳跃。我已经阅读了其他线程，但无法完全连接这些点。

我一直认为这一定是一个填充问题，但是，我的 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()
};

这是我的jsFiddle(链接被切断，因为这是全屏HTML设置(：https://jsfiddle.net/jihlenfeldt/435ugdyf/2/

我希望找到一种方法，使从绝对到固定的过渡是平滑的，并且最终不会覆盖一堆文本行。

感谢任何愿意提供一些建议的人，这个小问题已经变得相当令人头疼。

Answer 1

这是你的意思吗？

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 不再考虑它的高度，因为它将放置在所有内容的"顶部"。解决此问题的最佳方法是为其后面的元素(在本例中为内容(提供与导航栏具有相同高度的填充顶部。(与我不同，使用获取导航栏高度的变量，因为它的高度可能会有所不同，而不是像我那样的固定数字(60px((

Answer 2

好吧，

这是你的错误。

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

你的navbar有位置absolute，当window.pageYOffset > headerHeight是假的时，你就让它relative

#navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #111;
  z-index: 3;
  overflow: hidden;
  height: 20%;
  padding-bottom: 3%;
  display: flex;
  flex-direction: column;
  transition-property: width;
}

这就是颠簸的原因。此外，导航栏现已修复，因此不会干扰其他元素。这就是为什么这个div被导航栏覆盖(或正在向上(

<div class="content">
    <h1>text here</h1>
    <p>text here text here text here text here text here text here text here text here text here text here text here text here </p>
</div>

可能的解决办法是我们坚持一个立场。让我们让它相对。然后，当仓位固定时，我们将保证金顶部添加到contentdiv。这使得它离上面有一段距离。所以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

#navbar {
  position: relative;
...
}

所以你的小提琴变成了这样

Answer 3

为什么你们总是使用 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> }