固定在滾動頂部的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

回答

相關問題