導航上的對象，但導航應該在對象的頂部

Question

我寫了這一點的代碼，以便當用戶在我的網站上時，導航將隨着他們滾動。它工作得很好，但很少有對象會浮在導航之上的實例，它會隱藏在導航之後。這是一個jsfiddle。

https://jsfiddle.net/b24fgsf3/

你會發現當你滾動導航捕捉到頁面頂部在某一點，但h1標籤仍然是在導航欄的頂部可見，它隱藏了導航選項簡單。很煩人，我認爲這是糟糕的用戶體驗/用戶界面。我玩過職位和一些其他屬性，但我無法正常工作。

任何建議將不勝感激。

這是我寫的jQuery。因爲我顯然不能發佈任何東西。

var num = 15; 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > num) { 
    $('nav').addClass('fixed'); 
} else { 
    $('nav').removeClass('fixed'); 
} 
}); 

Answer 1

添加z-index: 1到nav到堆棧它的container的頂部 - 見下面的演示：

var num = 35; 
 

 
$(window).bind('scroll', function() { 
 
    if ($(window).scrollTop() > num) { 
 
     $('nav').addClass('fixed'); 
 
    } else { 
 
     $('nav').removeClass('fixed'); 
 
    } 
 
});

nav { 
 
    background-color: white; 
 
    height: 75px; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    clear: both; 
 
} 
 

 
.hero { 
 
    height: 200px; 
 
} 
 

 
.hero h1 { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 2em; 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li>Blah</li> 
 
    <li>Blah</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="hero"> 
 
    <h1> 
 
    Blah Blah Blah 
 
    </h1> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat. 
 

 
    </p> 
 
</div>

Answer 2

建議：你不需要使用JavaScript。

您只需在css文件中使用position: fixed;即可。

並使z-index的值很大，如：99999超出所有其他元素。

你應該把'container'div放在navbar的底部。

只需將「容器」元素的位置用於relative。

nav { 
    position: fixed; 
    background-color: white; 
    height: 75px; 
    width: 100%; 
    z-index: 99999; 
} 

.container{ 
    position: relative; 
    top: 75px; 
} 

將通過滾動遵循用戶：

nav { 
 
    position: fixed; 
 
    top: 0; 
 
    background-color: black; 
 
    color:white; 
 
    height: 50px; 
 
    width: 100%; 
 
    z-index: 99999; 
 
} 
 

 
.container{ 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
    
 
nav li{ 
 
    display:inline; 
 
} 
 

 
.hero { 
 
    height: 200px; 
 
} 
 

 
.hero h1 { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 2em; 
 
    background-color: yellowgreen; 
 
    color: white; 
 
}

<nav> 
 
    <ul> 
 
    <li>Blah</li> 
 
    <li>Blah</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="hero"> 
 
    <h1> 
 
    Blah Blah Blah 
 
    </h1> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat. 
 

 
    </p> 
 
    
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras te 
 
</div>