demo

Question

demo

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

CSS

body{  
    margin: 0;
    padding: 0;
    margin-top: 101px;    
}
div{
    height: 100px;
    width: 100%;
}
.one{
    background: red;
    position: fixed;
    top: 0;
}
.two{
    background: green;
}
.three{
    background: blue;
    height: 500px;
}
.four{
    background: black;
}

问题：

滚动时，蓝色div也会隐藏在红色div中。我想为绿色div做这个，之后它应该正常滚动。这意味着蓝色div，从下面所有div不应该隐藏在红色div中。

无论如何都有jquery。（如果使用纯css，那将是最好的）

jQuery的：

我尝试了以下但是有问题，请建议怎么做？

$(window).scroll(function(){
   var toph = 200;
    var scrollh = $(window).scrollTop();
    var totalh = $('.three').height() + $('.four').height();
    if (scrollh == toph){
        $('body').css('margin-top',totalh);
    }
});

Answer 1

你差不多完成了，position: relative为div.three

.three{
    background: blue;
    height: 500px;
    position: relative;
}

对于所有不滚动的div（例如div.four，...）

jsFiddle：http://jsfiddle.net/damoiser/nUwJa/1/

Answer 2

添加以下js功能。 Demo

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $('.one').css({
                position: 'absolute',
                top: pos
            });
        } else {
            $('.one').css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('.one').followTo(100);

在固定定位的div之后正常滚动

demo

2 个答案: