Vị trí jQuery DIV được cố định ở trên cùng khi cuộn

Question

Tôi có một trang khá dài và trong menu của bố cục, có một menu flyout. Tôi muốn phần flyout này của menu hiển thị ở đầu trang ngay cả khi người dùng đã cuộn thanh menu ra khỏi tầm nhìn. Dưới đây là HTML cho menu

<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> 

Và đây là kịch bản. Tôi đang khóa thanh điều hướng ".frozen_top" ở đầu cửa sổ trình duyệt khi cuộn (hoạt động chính xác cho đến nay), nhưng ngoài ra, tôi muốn thay đổi định vị CSS trên "#task_flyout" sau khi thanh đó khóa.

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

}); 

Answer 1

thay vì làm nó như thế, tại sao không chỉ làm cho flyout position:fixed, top:0; left:0; khi cửa sổ của bạn đã cuộn qua một độ cao nhất định:

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