0

我希望右侧菜单的 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"})btw 缓动真的很烦人......而且animate({'position':'fixed'})似乎不起作用（用 chrome 测试）。

没有 ：

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

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

有什么想法可以在没有这种丑陋效果的情况下完成这项工作吗？

4

2 回答 2

2

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

使用以下内容，您将获得一次丑陋的效果：

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

小提琴

于 2013-02-10T01:56:59.857 回答
0

您需要为您的逻辑添加一个检查，以防止它在每次滚动时执行 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);
}
于 2013-02-09T19:53:41.017 回答