粘性导航栏可滚动滚动（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不再考虑其高度，因为导航条将定位在所有内容的“顶部”。 解决此问题的最佳方法是在其后的元素（在本例中为内容）提供一个与导航栏相同高度的填充顶部。 （与我不同，请使用获取导航栏高度的变量，因为它的高度可以变化，而不是像我一样固定的数字（60像素））

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为false时，您使其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>

可能的解决方法是我们坚持一个位置。 让我们使其相对。 然后，当位置固定时，我们将margin top添加到content 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

#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> }