粘性导航与内容碰撞

Question

所以问题现在已经适应了内容部分，一旦它是 "fixed" 就不会确认导航栏。当你慢慢向下滚动时你会看到这个（它会跳过 2-3 行文本。）有什么建议吗？

这是我的代码：

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);

.banner,.sociallinks,.nav,.nav ul
{
 max-width: 100%;
 max-width: 100%;
}

.nav
{
 font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
 background: #333;
 background-attachment: fixed;
 background-size: 50px;
}

body
{
 margin: 0px auto;
 text-align: center;
}

.banner
{
 width: 700px;
 margin: 10px auto 0px auto;
 padding: 0px;
}

.sociallinks
{
 width: 960px;
 margin: 0px auto;
}

.sociallinks ul
{
 list-style-type: none;
 margin: 0px auto;
 padding: 0px
}

.sociallinks ul li
{
 display: inline-block;
 padding: 0px 10px;
}

.sociallinks ul li img 
{
 -webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
 width: 30px;
 height: 30px;
}

.nav
{
 width: 100%;
 margin: 0px auto;
 background: #333;
 padding: 1px 0px;
}

.nav ul
{
 width: 100%;
 list-style-type: none;
 margin: 10px auto;
 padding: 0px;
}

.nav ul li
{
 color: white;
 text-align: center;
 display: inline-block;
 text-decoration: none;
}

.nav ul li a
{
 width: 60px;
 border-top-color: silver;
 border-top-style: solid;
 border-top-width: 1px;
 color: white;
 text-align: center;
 display: inline-block;
 text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
 display: inline-block;
 text-decoration: none;
 color: #111;
 border-top-color: #111;
}

.nav ul li a.active
{
 border-top-color: #111;
 color: rgba(0,0,0,0.8);
 text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
 background-color: #333;
 position: fixed;
 top: 0px;
 padding: 0px;
 margin: 0px 0px;
 width: 100%;
 z-index:0;
}

.content
{
 position: relative;
 background-color: rgba(0,0,0,0.1);
 color: white;
 width: 960px;
 height: 1500px;
 max-width: 95%;
 max-width: 95%;
 margin: 0px auto;
 padding: 0px;
 border: 0px;
 z-index: -1;
 overflow: hidden;
}

table
{
 width: 100%;
}

<!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="main.css">
      <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <title>Broadbent</title>
     </head>
     <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
     <body>
      <div class="banner">
       <img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
      </div>
      <div class="sociallinks">
       <ul>
        <li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
        <li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
        <li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
       </ul>
      </div>
      <div class="nav">
       <ul>
        <li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
       </ul>
      </div>
      <div class="content">
       Main Section 1<br>Main Section 2<br>Main Section 3<br>Main Section 4<br>Main Section 5<br>Main Section 6
      </div>
      <script type="text/javascript" src="js/main.js"></script>
     </body>
    </html>

Answer 1

您的代码有误：

jQuery("nav").addClass("fixed");

应该是

jQuery(".nav").addClass("fixed");

注意选择器中缺少句点。

编辑：

您还必须修复对导航的其他引用。

此外，您正在为状态 div 使用 class 选择器，但其 ID 不是 class，因此您必须使用 # 选择器：

jQuery("#status").html(scrollPos);

所以在所有情况下，如果你的 HTML 看起来像这样

<div class="class-name"></div>

您的 jQuery 将是

jQuery(".class-name");

对于具有 id

的元素

<div id="element-id"></div>

您的 jQuery 将是

jQuery("#element-id");

希望对您有所帮助

Answer 2

将您的标记与脚本进行比较，我发现问题是一些拼写错误。您是在告诉您的脚本在标记中查找不存在的内容。

在这一行中：var navOffset = jQuery("nav").offset().top; 当您真正想要引用 "nav" 的类名时，您正在引用原生 "nav" 元素。

改为：var navOffset = $(".nav").offset().top;

类似地在这一行：jQuery(".status").html(scrollPos); 当你真的想引用一个 ID 时，你引用了一个类名 "status"。

改为("#status").html(scrollPos);

之后，您还需要更新 if/else 循环以引用 .nav 类名而不是本机 "nav" 元素。

试一试。我能够在我的垃圾箱中使用它：https://jsbin.com/lumabe/edit?html,css,js,output

涉及到 javascript 的 DOM 操作时，细节决定成败！

这是更正后的完整脚本：

jQuery(document).ready(function() {
var navOffset = jQuery(".nav").offset().top;

jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();
    jQuery("#status").html(scrollPos);

    if (scrollPos >= navOffset) {
        jQuery(".nav").addClass("fixed");
    } else {
        jQuery(".nav").removeClass("fixed");
    }
});

});

Answer 3

这是一个解决方案，只使用普通的 javascript（而不是 jQuery）：

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);

这是完整的工作示例：

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed'); 
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);

#banner,#sociallinks,.nav,.nav ul
{
 max-width: 100%;
 max-width: 100%;
}

.nav
{
 font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
 background: #333;
 background-attachment: fixed;
 background-size: 50px;
}

body
{
 margin: 0px auto;
 text-align: center;
}

.banner
{
 width: 700px;
 margin: 10px auto 0px auto;
 padding: 0px;
}

.sociallinks
{
 width: 960px;
 margin: 0px auto;
}

.sociallinks ul
{
 list-style-type: none;
 margin: 0px auto;
 padding: 0px
}

.sociallinks ul li
{
 display: inline-block;
 padding: 0px 10px;
}

.sociallinks ul li img 
{
 -webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
 width: 30px;
 height: 30px;
}

.nav
{
 z-index: 99;
 width: 960px;
 margin: 0px auto;
 background-color: #333;
}

.nav ul
{
 width: 100%;
 list-style-type: none;
 margin: 10px auto;
 padding: 0px;
}

.nav ul li
{
 color: white;
 text-align: center;
 display: inline-block;
 text-decoration: none;
}

.nav ul li a
{
 width: 160px;
 border-top-color: silver;
 border-top-style: solid;
 border-top-width: 1px;
 color: white;
 text-align: center;
 display: inline-block;
 text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
 display: inline-block;
 text-decoration: none;
 color: #111;
 border-top-color: #111;
}

.nav ul li a.active
{
 border-top-color: #111;
 color: rgba(0,0,0,0.8);
 text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
 position: fixed;
 top: 0;
 left: 50%;
 margin-left:-480px;
}


.content
{
 background-color: rgba(0,0,0,0.1);
 width: 960px;
 height: 1500px;
 max-width: 90%;
 max-width: 90%;
 margin: 0px auto;
 padding: 0px;
 border: 0px;
}

table
{
 width: 100%;
 color: white;
}

  <div id="status"></div>
  <div class="banner">
   <img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
  </div>
  <div class="sociallinks">
   <ul>
    <li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
    <li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
    <li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
   </ul>
  </div>
  <div class="nav">
   <ul>
    <li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
   </ul>
  </div>
  <div class="content">
  </div>

粘性导航与内容碰撞

Sticky Nav collision with Content

nav

sticky