滾動後粘標頭

Question

我做了一個標題導航，它在頁面的一半。當你滾動時，如果你知道我的意思，它就在頁面的頂部，我希望它能夠粘住。

我希望有人能告訴我如何完成這件事。 Demo JsFiddle

HTML

<header>menu</header> 

CSS

body, html { 
    height: 2000px; 
} 

header { 
    position: absolute; 
    top: 300px; 
    background-color: black; 
    color: white; 
    width: 100%; 
} 

Answer 1

看看這個教程。它解釋瞭如何使用CSS或jQuery取決於你想要的。

http://www.hongkiat.com/blog/css-sticky-position/

Answer 2

您將需要一些JavaScript。

Demo JsFiddle

HTML

<header> 
    <div class="logo">AWESOME HEADER!</div> 
    <div class="menu">Menu goes here - home - links - blah blah</div> 
</header> 
<div class="content"> 
    <!-- your stuff --> 
</div> 

CSS

* { margin:0; padding:0; } 

.logo { 
    font-size:40px; 
    font-weight:bold; 
    color:#a00; 
    font-style:italic; 
} 

.menu { 
    background:#a00; 
    color:#fff; 
    height:30px; 
    line-height:30px; 
    letter-spacing:1px; 
    width:100%; 
} 

.content { margin-top:10px; } 

/* the trick */ 

.menu-padding { padding-top:40px; } 

.sticky { 
    position:fixed; 
    top:0; 
} 

使用Javascript（JQuery的）

$(document).ready(function() { 
    var menu = document.querySelector('.menu'); 
    var origOffsetY = menu.offsetTop; 
    function scroll() { 
     if ($(window).scrollTop() >= origOffsetY) { 
      $('.menu').addClass('sticky'); 
      $('.content').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('sticky'); 
      $('.content').removeClass('menu-padding'); 
     } 
    } 
    document.onscroll = scroll; 
});