8

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

});
J_Tremain
  • 85
  • 1
  • 2
  • 5
  • You're more likely to get assistance on this if you create a stand-alone example in JSFiddle, as well as provide detail about what specifically you can't get working. – Nate Nov 20 '13 at 16:06

1 Answers1

52

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

Example

Pete
  • 57,112
  • 28
  • 117
  • 166
  • Thanks, I didn't even think about that. I'll give that a try. – J_Tremain Nov 20 '13 at 17:57
  • Any way to have this stop at a certain point when scrolling down? – Gregory R. Feb 28 '17 at 06:19
  • 1
    @GregoryR. you could try adding a and less than: http://jsfiddle.net/FyEGN/984/ otherwise you would probably need to do something a bit more complex with absolute positioning – Pete Feb 28 '17 at 09:38