0

私が尋ねていることを適切に説明する方法に苦労していますが、ここにboingboing.netからの最良の例があります。サイドバーを見て、一番下までスクロールします。ユーザーが下にスクロールしたときに、最後のウィジェット (それが何かはわかりません。申し訳ありません) または Advertise がその場所にとどまることに注意してください。底に達すると停止します。どうすればいいですか？

css の属性は知っていますposition:fixed;が、その方法は boingboing.net とは異なると思います。この問題について助けが必要です。助けはありますか？どうもありがとうございました！

4

3 に答える 3

5

のスクロール時にイベントをバインドし、の に基づいて の ターゲット divをwindow設定します。positionscrolltopwindow

$(window).scroll(function () {
   if($(this).scrollTop() >= 500){
      $('targetdiv').css('position','fixed');
   }
   else {
      $('targetdiv').css('position','relative');  // or any other position
   }
});

classまたは、特定の上部に追加することができwindowますposition:fixed

于 2012-09-16T01:43:36.713 に答える
0

添付プラグインが必要です。そのプラグイン以外のすべてをオフにすることで、 Twitter Bootstrapからダウンロードできるはずです。

于 2012-09-16T01:44:52.100 に答える
0

HTML

<img src=//ph.artsinn.de alt>
<div>
    <p>A short line of text, for better interpretation.</p>
    <p>Followed by another line, filled with letter and words</p> 
</div>

<img src=//ph.artsinn.de/240x160/666?text=scroll%20down alt id=obj>

<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>

CSS

/* not needed */
html,body{height:200%}
img {display:block}

JS

$(function() { 
    $window = $(window),
    $sidebar = $("#obj"),
    sidebarTop = $sidebar.position().top,
    $sidebar.css('position', 'fixed');

    $window.scroll(function(e) {
        scrollTop = $window.scrollTop(),
        topPosition = Math.max(0, sidebarTop - scrollTop),
        $sidebar.css('top', topPosition);
    });
});

デモ

于 2012-09-16T02:01:18.913 に答える