y-scroll上固定菜单的眨眼/眨眼问题

我希望右侧菜单的div元素适合标题菜单的底部，而y滚动到底部然后保持固定。当y滚动到顶部，保持相对于他以前的元素。y-scroll上固定菜单的眨眼/眨眼问题

这不容易解释，那么请看看以下几点：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;}

$(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'})似乎并不工作（铬测试）。

没有：

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

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

任何想法没有这种丑陋的影响做这项工作？

来源

2013-02-09 Valky

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

具有以下，你就会有丑陋的影响只是一个时间：

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

来源

2013-02-10 01:56:59

对于这个解决方案来说，从以前的元素来测试它是个好主意。 – Valky 2013-02-11 12:57:31

您需要在您的逻辑中添加一个检查以防止它在每个滚动条上执行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-09 19:53:41 Jeffpowrs

谢谢您的回答，但不幸的是，这并不时滚动的作品再次TOP：HTTP ：//jsfiddle.net/HmJbh/1/ – Valky 2013-02-10 00:56:19

y-scroll上固定菜单的眨眼/眨眼问题

回答

相关问题