3

ページをロードすると、divがその下部にくっつくようにしようとしています。次に、ユーザーが下にスクロールすると、一番上にくっつきます。

粘着要素を使ってトップ部分への貼り付けができます。

<div id="container">
<div id="menu">
    <ul>
        <li><a href='#test'>Line 1</a></li>
        <li><a href='#'>Line 2</a></li>
        <li><a href='#'>Line 3</a></li>
    </ul>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
           if($(this).scrollTop()>=660)
           {
           $('#menu').addClass('fixed');
           }else{
               $('#menu').removeClass('fixed');
           }
                   });
    });
    </script>

私はそれができないので、ロード時に底にくっつきます。不明な場合は、小さなモックアップを添付しました。

スティッキー

4

1 に答える 1

9

更新しました。
jsFiddleを調べてみましょう。

jQuery：

$(document).ready(function() {
    var windowH = $(window).height();
    var stickToBot = windowH - $('#menu').outerHeight(true);
    //outherHeight(true) will calculate with borders, paddings and margins.
    $('#menu').css({'top': stickToBot + 'px'});

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
});​

注：さらに先に進みたい場合は、この回答も調べることをお勧めします。

ウィンドウスクロールアニメーションのCSS値制限の設定

于 2012-08-16T08:33:33.273 に答える