使用CSS和jQuery

Question

我有一个标题来自700 px的div。所以我想在滚动700 px之后将标题修复。

这就是我所做的。

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

jquery添加了fixed class，并删除了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();  
    });  
});

只需使用初始页面加载（即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执行此操作，不幸的是not widely supported yet。

您可能想要查看jQuery Waypoints插件。除此之外，它使sticky elements变得容易。

滚动超出它后修正一个分区

3 个答案:

使用CSS和jQuery

http://jsfiddle.net/SinisterSystems/74wPn/5/