我的页面相当长,并且在布局菜单中有一个弹出菜单。我希望菜单的弹出部分显示在页面顶部,即使用户将菜单栏滚动到视线之外。这是菜单的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”锁定到滚动浏览器窗口的顶部(到目前为止,它可以正常工作),但是此外,一旦锁定,我想更改“
$(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;在窗口滚动后不让弹出按钮通过某个高度:
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;}