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

您将需要一些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;
 });

Answer 2

看一下本教程。它解释了如何根据您的需要使用CSS或jQuery来完成它。

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

滚动后粘贴标题

2 个答案: