I have a page that's fairly long and within the layout's menu, there's a flyout menu. I'd like this flyout portion of the menu to show at the top of the page even when the user has scrolled the menu bar out of view. Here's the HTML for the 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>
And here's the script. I'm locking the nav bar ".frozen_top" to the top of the browser window on scroll (that's working correctly so far), but additionally, I'd like to change the CSS positioning on "#task_flyout" once that bar locks.
$(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");
}
}
});
This question is related to
javascript
jquery
html
css
positioning
instead of doing it like that, why not just make the flyout position:fixed, top:0; left:0; once your window has scrolled pass a certain height:
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;}
Source: Stackoverflow.com