固定在滚动顶部的jQuery位置DIV

我有一个相当长的页面，并且在布局的菜单中有一个弹出菜单。即使用户将菜单栏滚动到视图外，我也希望菜单的该弹出部分显示在页面的顶部。下面是HTML的菜单固定在滚动顶部的jQuery位置DIV

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

});

来源

2013-11-20 J_Tremain

如果您在JSFiddle中创建独立示例，并且提供有关您无法正常工作的详细信息，那么您更可能获得此帮助。 – Nate

，而不是做它这样，为什么不干脆让弹出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

来源

2013-11-20 16:09:54 Pete

谢谢，我甚至没有想到这一点。我会试一试。 –

太棒了！它真的很棒 –

任何方式来滚动下来时，在某个点停止这个停止？ –

固定在滚动顶部的jQuery位置DIV

回答

相关问题