1

次の CSS を使用して、要素がブラウザーの下部に固定されている Web サイトで効果を作成しようとしています。

div.featured-image {
width: 100%;
position: fixed;
z-index: 10;
}

私がやりたいのは、このhttp://vertstudios.com/blog/demo/stickyscroller/demo.phpのようなものを使用して、アイテムが特定のポイントを超えて上にスクロールするのを止めることです。サイトの上部にロゴを絶対配置して配置していますが、ブラウザの高さが十分でない場合に固定アイテムが重ならないようにします。そのため、上部の約 800px のバッファーを超えてスクロールできないようにしようとしていますが、ページの下部に固定されたままです。

4

1 に答える 1

0

これは、JQuery を使用して行うことができcss、scrollTop().

サンプル JQuery:

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 550) { 
        $('#footer').css('bottom',''); 
        $('#footer').css('top','550px'); 
    } else {
        $('#footer').css('top',''); 
        $('#footer').css('bottom','0px');
    }
});

CSS (div#footer 用):

#footer{
    position: fixed;
    left: 0px;
    display: block;
    background-color: green;
    z-index: 10;
    height: 100px;
    width: 100%;
}

そして、実用的なフィドル。

于 2012-10-24T20:20:51.553 に答える