jquery - 如何制作一个保持其位置的 Div？

Question

我很难正确描述我在问什么，但这是来自boingboing.net的最佳示例。查看侧边栏，然后向下滚动到底部。注意当用户向下滚动时最后一个小部件（我不知道它是什么，抱歉。）或 Advertise 是如何停留在其位置的？它在到达底部时也会停止。我该怎么做？

我知道 css 属性，position:fixed;但我猜该方法与 boingboing.net 不同。在这件事上需要帮助。有什么帮助吗？非常感谢你！

Answer 1

在 的滚动上绑定一个事件window，并根据 的 设置position目标 divscrolltop的window。

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

或者更好的是，您可以class在window其中添加一个position:fixed

Answer 2

你需要一个词缀插件。您应该能够通过取消切换除该插件以外的所有内容从Twitter Bootstrap下载该插件。

Answer 3

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

---

演示