Question

我很难如何正确描述我的要求，但这是boingboing.net中最好的例子。查看侧栏然后向下滚动到底部。注意当用户向下滚动时，最后一个小部件（我不知道它是什么，对不起。）或广告是如何停留在它的位置的？它到达底部时也会停止。我该怎么做？

我知道css属性，position:fixed;但我猜这种方法与boingboing.net不同。需要帮助解决这个问题。任何帮助？非常感谢你！

Answer 1

在滚动window时绑定一个事件，并根据position的{{1}}设置目标div的scrolltop。

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

您需要affixation plugin。您应该可以通过取消除插件之外的所有内容从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);
    });
});

<强> DEMO

如何使Div保持其位置？

3 个答案: