在滚动之后滚动后修复了一个部门

Question

我有一个标头，该标头是在700 px的DIV之后出现的。因此，我希望该标头在滚动700 px后固定。

这就是我所做的。

<div id="header" class="header">......</div>

fixed class由JQuery添加，header class删除。

.fixed{
    position:fixed;
    top:22px; 
    left:0;
    width: 100%;
}

我在jquery

中这样做

$(window).scroll(function() {
    if ( $('body').scrollTop() > 700){
        $('#header').addClass('fixed');
        $('#header').removeClass('header');
    } else {
        $('.header').removeClass('fixed');
        $('#header').addClass('header');
    } 
});

有人请帮助我。请从头开始告诉我。告诉我我需要包含什么 jquery lib，如果提供代码也是jquery的新代码。

Answer 1

使用CSS和JQuery

http://jsfiddle.net/sinistersystems/74wpn/5/

html：

<div id="header">Hello Title</div>
<div id="navBar">Navigation!</div>
<div class="filler"></div>

基本标记。这里没什么特别的：

CSS：

*{margin:0;padding:0;}
#header {
    background:#CCC;
    width:100%;
    height:700px;
}
#navBar {
    background:#AAA;
    width:100%;        
}
.sticky {  
    position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;  
    border-top: 0;  
}  
.filler {
    height:1000px;
}

注意我们的sticky类。这对所有魔术都充满了魔力（JS弄清楚我们滚动有多高。）

）

jquery/javaScript：

$(function() {  
    var navTop = $('#navBar').offset().top;  
    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  
        if (scrollTop > navTop) {   
            $('#navBar').addClass('sticky');  
        } else {  
            $('#navBar').removeClass('sticky');   
        }  
    };  
    stickyNav();  
    $(window).scroll(function() {  
        stickyNav();  
    });  
}); 

只需使用初始页面加载（ ie navtop ）的定位来评估我们需要走多远并将其缓存到变量中，以便我们不会不断加载它。然后，每次窗口滚动和页面加载时都可以运行一个函数。

让我知道您是否想进一步说明。

Answer 2

使用#header而不是header

else {
        $('#header').removeClass('fixed');
        $('#header').addClass('header');
    } 

You can include jquery in jsp like this..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Answer 3

最终您将可以使用position: sticky使用纯CSS进行此操作，不幸的是，它尚未得到广泛支持。

您可能需要检查jQuery Waypoints插件。除其他外，它使其变得容易粘元素。