javascript - y 滚动条上固定菜单的眨眼/闪烁问题

Question

我希望右侧菜单的 div 元素适合标题菜单的底部，同时 y 滚动到底部然后保持固定。并在 y 滚动到顶部时，保持相对于他之前的元素。

这个不好解释，请看下面的:fiddle

HTML

<div id="main">
    <div id="menu">Fixed Menu</div>
    <div id="container">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit....
        </div>
        <div id="right_menu">
            <div id="items">
                <!-- Variable number of items !-->
                &bull; Some items<br/>
                &bull; Some items<br/>
                &bull; Some items<br/>
                &bull; Some items 
            </div>
            <div id="fixed_items">
                <!-- Items to be fixed to top menu by scrolling !-->
                &bull; Fixed scroll items<br/>
                &bull; Fixed scroll items<br/>
                &bull; Fixed scroll items
                <input type="text" id="test"/>
            </div>
       </div>
    </div>
</div>

CSS

#main {
    position:relative;
    height:2000px;
    overflow-y:scroll;
    background:#EDEDED;}
#menu {
    position:fixed;
    z-index:10;
    width:100%;
    line-height:40px;
    background:#555555;
    color:#EDEDED;
    padding-left:10px;}
#container {
    display:table;
    width:100%;
    margin-top:40px;}
#content {
    display:table-cell;
    padding:10px;
    text-align:justify;}
#right_menu {
    display:table-cell;
    width:200px;}
#items, #fixed_items {
    position:relative;
    z-index:9;
    width:160px;
    padding:10px;
    border-bottom:4px solid #555555;
    background:#CCCCCC;}
input {width:100px;}

JS

$(document).ready(function(){
    $(window).scroll(function(){fix_items();});
});
function fix_items()
{
    var windowPos=$(window).scrollTop(),
        bloc=$('#fixed_items'),
        blocPos=bloc.position(),
        newPos=windowPos-blocPos.top+40;
    if(newPos>0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (newPos<=0)
        bloc.css({'position':'relative','top':'0px'});
    $('#test').val(blocPos.top+'/'+windowPos);
}

在 bigining 时，我使用了一些 stop().animate({"come CSS"}) 顺便说一句，缓动真的很烦人......和 ​​animate({'position' :'fixed'}) 似乎不起作用(用 chrome 测试)。

没有:

else if (newPos<=0)
        bloc.css({'position':'relative','top':'0px'});

它就像一个魅力，但 #fixed_item 不能再次适合 #items. 我想问题就在这里，我找不到解决方案。

有什么办法可以避免这种丑陋的效果吗？

Answer 1

最好测试前一个元素的位置，而不是固定滚动的元素(因为固定的元素位置似乎跳跃......)。

使用下面的代码，你只会得到一次丑陋的效果:

function fix_items()
{
    var windowPos=$(window).scrollTop(),
        bloc=$('#fixed_items'),
        prev=$('#items'),
        prevPos=prev.position(),
        header=$('#menu'),
        newPos=windowPos - (prevPos.top + prev.height() - 16);
    if(newPos>=0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (newPos<0)
        bloc.css({'position':'relative','top':'0px'});
}

Fiddle