jQuery DIV position fixed oben auf den Blättern

Ich habe eine Seite, die ist ziemlich lang und im layout-Menü, es gibt ein flyout-Menü. Ich würde dies gerne flyout des Menüs zu zeigen, am oberen Rand der Seite, selbst wenn der Anwender bereits gescrollt hat die Menü-Leiste nicht zu sehen. Hier ist der HTML-Code für das Menü

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

Und hier ist das Skript. Ich bin Verriegelung der nav-bar ".frozen_top" an die Spitze des browser-Fensters auf Blättern (das funktioniert soweit richtig), aber zusätzlich würde ich gerne ändern Sie die CSS-Positionierung auf "#task_flyout" einmal, die bar sperrt.

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

});
Sind Sie eher, um Hilfe zu erhalten, wenn Sie einen stand-alone Beispiel in JSFiddle, sowie Angaben darüber, was konkret Sie nicht bekommen kann, zu arbeiten.

InformationsquelleAutor J_Tremain | 2013-11-20

  1. 49

    anstatt das zu tun, warum nicht nur machen Sie das flyout - position:fixed, top:0; left:0; einmal Ihre Fenster gescrollt wurden, übergeben Sie eine bestimmte Höhe:

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

    Beispiel

    Danke, habe ich gar nicht darüber nachdenken. Ich gebe das mal probieren.
    Super!!! Es ist wirklich genial
    Eine Möglichkeit zu haben, diese zu stoppen an einem bestimmten Punkt, wenn Sie nach unten scrollen?
    Sie könnten versuchen, hinzufügen von ein und weniger als: jsfiddle.net/FyEGN/984 sonst würden Sie wahrscheinlich brauchen, um etwas zu tun ein bisschen komplexer mit absoluter Positionierung
    Gute Arbeit . es ist für mich arbeiten.

    InformationsquelleAutor Pete

Schreibe einen Kommentar