Question

我真的知道如何通过在CSS中插入position:fixed;top:0;来保持导航栏在顶部。但是，我想要的不同于这一点。

我想要的是在导航栏之前插入新的div（仅限图片）。因此，当我打开网页时，我希望在滚动页面之前先看到图像。向下滚动图像后，我们可以在那里看到导航栏。而且当我在导航栏后面向下滚动时，我希望导航栏粘在页面顶部。

我的意思是here。

到目前为止，我所做的是在导航栏之前添加了.home。我做得很乱。以下是编码：

＆＃13;

.home {
min-height:400px; 
}

#header-center {
  margin: 0 auto;
}
#headerleft {
  float: left;
  margin: 20px;
}
#header,
#top {
  height: 80px;
  background-color: #E0E0E1;
  color: #FFF;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}
#header p,
#top p {
  color: #FFF;
}
#header h1,
#top h1 {
  font-size: 20px;
  margin-top: 10px;
  letter-spacing: 0;
}
#header h1 a,
#top h1 a {
  font-size: 25px;
  color: #FFF;
  text-decoration: none;
}
#header h1 a:hover,
#top h1 a:hover {
  color: #FFF;
}
#headerleft h1 {
  font-family: Calibri sans-serif;
  font-size: 25px;
  letter-spacing: 1px;
}
#headerleft h1 a:hover {
  color: #CCC;
}
#nav {
  float: right;
}
#nav-icon img {
  display: none;
}
#nav ul li {
  float: left;
  list-style:none;
}
#nav ul li a {
  font-size: 20px;
  color: #FFF;
  margin: 0px;
  padding: 10px;
  text-decoration: none;
  float: left;
  font-family: 'alegreya_sansregular';
  cursor: pointer;
}
#nav ul li a:hover {
  border-bottom: 4px double #FFF;
}

＆＃13;

<div class="home">
  <img src="assets/images/wallpaper.png" />
</div>

<div id="header">
  <div id="header-center">
    <div id="headerleft">
      <h1> <a href="#"> LOGO </a> </h1>
    </div>

    <div id="nav">
      <a href="" id="nav-icon">
        <img src="assets/images/navigation.png" alt="nav-menu">
      </a>
      <ul>
        <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
        </li>
        <li> <a href="works"> WORKS </a> 
        </li>
        <li> <a data-scroll-nav="1"> ABOUT </a> 
        </li>
        <li> <a data-scroll-nav="2"> CONTACT </a> 
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

你能告诉我我的代码有什么问题吗？感谢。

Answer 1

您可以先将标题设置为位置：相对于css。然后你会添加jquery或javascript来说 - 当你滚动超过400px垂直（y）位置时，改变位置：相对于position：fixed。这通常是如何运作的。

要回答您的评论，您可以添加css样式：

.fixedPosition {
    position:fixed !important;
    top: 0;
    left: 0;
}

然后添加jQuery（如果需要，不要忘记放置库和文档就绪功能）：

  $(window).scroll(function () {
    var y = $(window).scrollTop(); 

    if (y > 400) {       
       $('#header').addClass('fixedPosition');
    } else { 
       $('#header').removeClass('fixedPosition'); 
    } 
});

此处 FIDDLE

Answer 2

默认情况下，如何将标头设置为position: relative;，然后在javascript中检测它是否到达视口顶部：

$(window).on("scroll", function(){
  if (document.getElementById('sticky-header').getBoundingClientRect().top < 1){
    $('#sticky-header').css({'position':'fixed','top':'0'});
  }
  // add code for reverse when you scroll up
  // ...
});

在背景图像后保持导航在顶部

2 个答案: