Javascript 闪烁/闪烁问题，y轴上有固定菜单

我希望我的右菜单中的div元素能够在y滚动到底部然后保持固定的同时适合标题菜单的底部。当y轴滚动到顶部时，保持相对于上一个元素的位置

这不容易解释，因此请查看以下内容：

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>

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

它就像一个符咒，但是

#fixed#u项目

无法再次适应

#项目。

我想问题就在这里，我找不到解决方案

---

有没有办法在没有这种丑陋效果的情况下完成这项工作？

您需要在逻辑中添加一个检查，以防止它在每个滚动上执行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);
}

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{fix_items（）；}）；
});
函数fix_items（）
{
var windowPos=$（window.scrollTop（），
集团=$（“#固定项目”），
blocPos=bloc.position（），
newPos=windowPos blocPos.top+40，
isFixed=false；
如果（！isFixed&&newPos>0）
css（{'position'：'fixed'，'top'：'40px'}）；
否则，如果（isFixed&&newPos测试前一个元素的位置比使用固定滚动条的元素更好（因为固定元素的位置似乎在跳跃…）

通过以下操作，您只会有一次丑陋的效果：

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

函数修复项（）
{
var windowPos=$（window.scrollTop（），
集团=$（“#固定项目”），
上一个=$（“#项”），
prevPos=上一个位置（），
页眉=$（“#菜单”），
newPos=windowPos-（prevPos.top+prev.height（）-16）；
如果（新位置>=0）
css（{'position'：'fixed'，'top'：'40px'}）；
else if（newpost）感谢您的回答，但不幸的是，当您再次滚动到顶部时，这不起作用：对于这个解决方案，最好从前面的元素测试它。
$(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);
}

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