Wink/blink问题，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);
}

在大的时候，我用了一些stop().animate({"come CSS"})，但放松真的很烦人。。。CCD_ 2似乎不起作用（用铬测试）。

无：

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

Answer 2

您需要在逻辑中添加一个检查，以防止它在每次滚动时执行css更改。

$(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,
        isFixed = false;
    if( !isFixed && newPos>0)
        bloc.css({'position':'fixed','top':'40px'});        
    else if (isFixed && newPos<=0)
        bloc.css({'position':'relative','top':'0px'});
    $('#test').val(blocPos.top+'/'+windowPos);
}