我怎样才能让分会保持其位置？

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

我知道css属性，position:fixed;但我想这种方法是不同于boingboing.net。在这件事上需要帮助。任何帮助？非常感谢你！

来源

2012-09-16 Scarlet Ariadne Vela

看一看[本教程（http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/） – smilledge

在window的卷动上绑定事件，并根据的scrolltop设置目标div的position。

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

或者你可以更好的对window特别是其顶部有position:fixed

来源

2012-09-16 01:43:36 Jashwant

我可以问这是什么线？ if（$（this）.scrollTop> = 500） –

是的，你可以问;）。笑话分开......'$（this）'是指我们绑定'scroll'事件的'window'' object'。 'scrollTop（）'是一个函数，它给出'窗口'的顶部 – Jashwant

感谢Jashwant，即时通讯使用wordpress。任何想法应该在哪里粘贴你的代码？当我粘贴在我的functions.php文件中时，出现错误。 –

你需要一个affixation plugin加class。你应该能够通过去除除该插件以外的所有东西来下载Twitter Bootstrap中的一个。

来源

2012-09-16 01:44:52 FluffyJack

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}

$(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

来源

2012-09-16 02:01:18 yckart

我怎样才能让分会保持其位置？

回答

相关问题