jDie Abfrageposition DIV ist oben auf dem Bildlauf festgelegt
Ich habe eine ziemlich lange Seite und im Menü des Layouts befindet sich ein Flyout-Menü. Ich möchte, dass dieser Flyout-Teil des Menüs oben auf der Seite angezeigt wird, auch wenn der Benutzer die Menüleiste nicht mehr angezeigt hat. 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 Drehbuch. Ich sperre die Navigationsleiste ".frozen_top" am oberen Rand des Browserfensters beim Scrollen (das funktioniert soweit korrekt), möchte aber zusätzlich die CSS-Position auf "#task_flyout" ändern, sobald diese Leiste gesperrt ist.
$(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");
}
}
});