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

Question

演示

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函数。演示

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);