Wink/blink问题,y轴滚动上的固定菜单
Wink/blink issue with fixed menu on y-scroll
我希望右菜单的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 !-->
• Some items<br/>
• Some items<br/>
• Some items<br/>
• Some items
</div>
<div id="fixed_items">
<!-- Items to be fixed to top menu by scrolling !-->
• Fixed scroll items<br/>
• Fixed scroll items<br/>
• 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.
。我想问题就在这里,我找不到解决方案。
有没有办法在没有这种丑陋效果的情况下完成这项工作?
最好测试前一个元素的位置,而不是使用固定滚动的元素(因为固定元素的位置似乎会跳跃…)。
有了以下内容,你只会有一次丑陋的效果:
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
您需要在逻辑中添加一个检查,以防止它在每次滚动时执行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);
}
相关文章:
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 滚动后保持固定的菜单栏不起作用
- 将菜单项与滚动绑定时出现Jquery错误
- jQuery透明菜单向上滚动
- 当打开绝对定位下拉菜单时,页面将滚动到顶部
- 具有子菜单和平滑滚动的粘性导航
- 阻止在单击和关闭覆盖菜单css时滚动正文
- 向下滚动时隐藏菜单,向上滚动时显示,适用于Chrome,不适用于Safari(手机)
- 关闭移动菜单后恢复滚动位置
- 如何在滚动时突出显示菜单按钮 - AngularJs
- 移动设备中的菜单不会滚动
- jquery ui选择菜单滚动条不工作
- 侧菜单滚动滞后于safari(ios)
- 使onsen ui滑动菜单滚动到顶部
- 滚动下拉菜单滚动过多
- 固定顶部菜单滚动随着内容
- 菜单滚动条使用jquery或javascript移动应用程序
- 响应式粘性菜单滚动后不工作
- 纯css下拉菜单's子菜单滚动不显示多下拉菜单
- 添加缩放会破坏菜单滚动功能