web-dev-qa-db-fra.com

jQuery position DIV fixé en haut sur le défilement

J'ai une page assez longue et dans le menu de la mise en page, il y a un menu déroulant. J'aimerais que cette partie déroulante du menu s'affiche en haut de la page même lorsque l'utilisateur a fait défiler la barre de menus hors de vue. Voici le HTML du 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>

Et voici le script. Je verrouille la barre de navigation ".frozen_top" en haut de la fenêtre du navigateur sur le défilement (qui fonctionne correctement jusqu'à présent), mais en plus, je voudrais changer le positionnement CSS sur "#task_flyout" une fois que cette barre se verrouille.

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

});
javascriptjqueryhtmlcsspositioning
7
J_Tremain

au lieu de le faire comme ça, pourquoi ne pas simplement faire le flyout position:fixed, top:0; left:0; une fois que votre fenêtre a défilé, passez une certaine hauteur:

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

Exemple

50
Pete