我有一个相当长的页面，在布局的菜单中，有一个弹出菜单。我希望菜单的弹出部分显示在页面顶部，即使用户已将菜单栏滚动到视图之外。这是菜单的 HTML
<div id="task_flyout">
<div id="info">Compare up to 3 cards side-by-side. Click “Add to Compare” next to any card to get started…</div>
<div id="card1" class="card">
<div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
</div>
<div id="card2" class="card">
<div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
</div>
<div id="card3" class="card">
<div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
</div>
<div id="compare"><a href="comparecards.php">Compare Now</a></div>
</div>
<div id="task_arrow"></div>
</div>
这是脚本。我将导航栏“.frozen_top”锁定到滚动浏览器窗口的顶部（到目前为止工作正常），但此外，一旦导航栏锁定，我想更改“#task_flyout”上的 CSS 定位。
$(window).scroll(function(){
if($(document).width() > 900) {
$(".frozen_top").css("top",Math.max(130,$(this).scrollTop()));
if($(this).scrollTop() > 135) {
$(".frozen_top").css("margin-top","-95px");
$("#task_flyout").css("top","53px");
} else {
$(".frozen_top").css("margin-top","-5px");
$("#task_flyout").css("top","33px");
}
}
});
与其这样做，为什么不直接制作弹出窗口position:fixed, top:0; left:0;一旦你的窗口滚动超过一定的高度：
jQuery
$(window).scroll(function(){
if ($(this).scrollTop() > 135) {
$('#task_flyout').addClass('fixed');
} else {
$('#task_flyout').removeClass('fixed');
}
});
css
.fixed {position:fixed; top:0; left:0;}
Example http://jsfiddle.net/FyEGN/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
