Question

我有一个导航条。页面加载后，第一个home div会正确显示。但是，向下滚动然后再向上备份之后，home div中的某些内容被顶部的导航栏隐藏。如何解决此问题？任何建议表示赞赏！

window.onscroll = () => {
  myFunction()
};

const navbar = document.getElementById("navbar");

const sticky = navbar.offsetTop;

myFunction = () => {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  padding: 0px;
  margin: 0px;
}

#navbar {
  overflow: hidden;
  background-color: #000;
}

#navbar a {
  float: right;
  display: block;
  text-align: center;
  padding: 1vw;
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: 2.5vw;
  font-weight: 400;
  font-style: italic;
}

.color-nav a {
  color: white;
}

.active {
  background-color: #fff;
  color: black !important;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.main-section {
  height: 45vw;
}

<body>
  <header>
    <nav>
      <div class='color-nav' id="navbar">
        <a id='contact-link' href="#contact">Contact</a>
        <a id="about-link" href="#about">About</a>
        <a id='portfolio-link' href="#portfolio">Portfolio</a>
        <a id='home-link' class="active" href="#home">Home</a>
      </div>
    </nav>
  </header>
  <section>
    <div id='home-1' class="home main-section">
    </div>
  </section>
  <section>
    <div id="portfolio-1" class="portfolio main-section">

    </div>
  </section>
  <section>
    <div id="about-1" class='about main-section'>

    </div>
  </section>
  <section>
    <div id='contact-1' class='contact main-section'>

    </div>
  </section>

</body>

Answer 1

问题是，滚动时会将固定位置添加到#navbar，因此将其从页面流中移出并将其固定到屏幕上。为此，您将其从<nav>和<header>中删除，这些元素的高度现在为0。如果您使用chrome dev工具检查#navbar，则可以请注意它至少高31像素，至少在我的窗口中可能会有所不同，因为如果您问我不是很好的做法，那么您将其编码为在vw内填充，因此您可能希望重新考虑一下，并在px，em或rem中加一个填充，这样一个简单的解决方法就是给父div（<header>或{{1}） }高度为31px或导航栏的高度是什么，因此当您将导航栏从页面流中移出时，导航栏的高度将不会丢失，如下所示：

<nav>

此处为摘要：

header{
  height:31px;
}

window.onscroll = () => {
  myFunction()
};

const navbar = document.getElementById("navbar");

const sticky = navbar.offsetTop;

myFunction = () => {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  padding: 0px;
  margin: 0px;
}

header{
  height:31px;
}

#navbar {
  overflow: hidden;
  background-color: #000;
}

#navbar a {
  float: right;
  display: block;
  text-align: center;
  padding: 1vw;
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: 2.5vw;
  font-weight: 400;
  font-style: italic;
}

.color-nav a {
  color: white;
}

.active {
  background-color: #fff;
  color: black !important;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

section{
  height:100vh;
  border:5px solid green;
}

但是，如果您只是将导航栏放在页面顶部，则没有理由使用任何此类javascript，您只需在正文顶部添加填充并为导航栏设置固定位置即可。根本没有任何这些滚动事件。如果您的导航栏上方有某些内容，并且希望以某种方式向下滚动页面后进行修复，则可以添加类似此类的javascript滚动事件。这是其中的一个片段：

  <header>
    <nav>
      <div class='color-nav' id="navbar">
        <a id='contact-link' href="#contact">Contact</a>
        <a id="about-link" href="#about">About</a>
        <a id='portfolio-link' href="#portfolio">Portfolio</a>
        <a id='home-link' class="active" href="#home">Home</a>
      </div>
    </nav>
  </header>
  <section>
    <div id='home-1' class="home main-section">
    </div>
  </section>
  <section>
    <div id="portfolio-1" class="portfolio main-section">

    </div>
  </section>
  <section>
    <div id="about-1" class='about main-section'>

    </div>
  </section>
  <section>
    <div id='contact-1' class='contact main-section'>

    </div>
  </section>

body {
  padding: 0px;
  padding-top:31px;
  margin: 0px;
}
nav{
  position:fixed;
  top:0;
  width:100%;
}

#navbar {
  overflow: hidden;
  background-color: #000;
}

#navbar a {
  float: right;
  display: block;
  text-align: center;
  padding: 1vw;
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: 2.5vw;
  font-weight: 400;
  font-style: italic;
}

.color-nav a {
  color: white;
}

.active {
  background-color: #fff;
  color: black !important;
}

section{
  height:100vh;
  border:5px solid green;
}

Answer 2

position: fixed;

不会留下空隙，因此由于相对的行为，它所覆盖的空间将被其他元素占用。您需要以与导航高度相同的大小以边距或填充内容。

Answer 3

我需要将window.pageYOffset >= sticky更改为window.pageYOffset > sticky，因为在滚动到顶部时并未删除该类。

粘性导航栏在滚动到顶部时会隐藏内容

3 个答案: