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为假时，您就是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>

可能的解决方法是我们坚持一个位置。让我们使其相对。然后，当位置固定时，我们在content div上添加边距top。距离上方有一段距离。因此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;
...
}

所以您的fiddle becomes something like this

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

粘性导航栏可滚动滚动（JS，HTML，CSS）

3 个答案: