0

デモ

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

2 に答える 2

1

次の 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);
于 2013-09-02T08:01:08.753 に答える