jQuery position DIV fixed at top on scroll

J_Tremain

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

});
Pete

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

jQuery position DIV fixed at top on scroll

From Dev

JQuery Scroll with position:fixed CSS

From Dev

setting div to position: fixed on scroll with jquery causes content below to jump up

From Dev

scroll and position: fixed inside overflow: scroll div

From Dev

div + scroll + fixed bottom + variable top

From Dev

Header Div position fixed on top of page but on load show a div on top of it

From Dev

show/hide div jquery not working in fixed position

From Dev

div image position fixed + scroll

From Dev

Scroll to top of div within a div jquery

From Dev

jQuery position DIV fixed on scroll

From Dev

Fixed position div on top vertical space

From Dev

How to scroll div with page without position: fixed?

From Dev

javascript for position fixed on scroll

From Dev

JQuery scroll li id to top of div

From Dev

Can't detect scroll to top if I'm in a fixed div

From Dev

How to position a div left to another div and top fixed to body?

From Dev

css/jquery scroll-fixed div issues

From Dev

Jquery detect div scroll bar scroll to top

From Dev

setting div to position: fixed on scroll with jquery causes content below to jump up

From Dev

jQuery scroll to top of DIV that is opening

From Dev

make div (position:fixed) scroll horizontally

From Dev

jQuery auto scroll div to div and back to top

From Dev

Fixed position div on top vertical space

From Dev

jQuery: scroll to the top of a div that has overflow: scroll;

From Dev

How to make position fixed div scroll horizontally?

From Dev

jQuery position().top behaving the same as offset().top inside fixed parent

From Dev

Scroll a fixed position div to its bottom and then stop

From Dev

prevent automatically page scroll up when using jquery fadein/out founction on fixed position div

From Dev

position top inside position fixed div always return the same value for every element jquery

Related Related

  1. 1

    jQuery position DIV fixed at top on scroll

  2. 2

    JQuery Scroll with position:fixed CSS

  3. 3

    setting div to position: fixed on scroll with jquery causes content below to jump up

  4. 4

    scroll and position: fixed inside overflow: scroll div

  5. 5

    div + scroll + fixed bottom + variable top

  6. 6

    Header Div position fixed on top of page but on load show a div on top of it

  7. 7

    show/hide div jquery not working in fixed position

  8. 8

    div image position fixed + scroll

  9. 9

    Scroll to top of div within a div jquery

  10. 10

    jQuery position DIV fixed on scroll

  11. 11

    Fixed position div on top vertical space

  12. 12

    How to scroll div with page without position: fixed?

  13. 13

    javascript for position fixed on scroll

  14. 14

    JQuery scroll li id to top of div

  15. 15

    Can't detect scroll to top if I'm in a fixed div

  16. 16

    How to position a div left to another div and top fixed to body?

  17. 17

    css/jquery scroll-fixed div issues

  18. 18

    Jquery detect div scroll bar scroll to top

  19. 19

    setting div to position: fixed on scroll with jquery causes content below to jump up

  20. 20

    jQuery scroll to top of DIV that is opening

  21. 21

    make div (position:fixed) scroll horizontally

  22. 22

    jQuery auto scroll div to div and back to top

  23. 23

    Fixed position div on top vertical space

  24. 24

    jQuery: scroll to the top of a div that has overflow: scroll;

  25. 25

    How to make position fixed div scroll horizontally?

  26. 26

    jQuery position().top behaving the same as offset().top inside fixed parent

  27. 27

    Scroll a fixed position div to its bottom and then stop

  28. 28

    prevent automatically page scroll up when using jquery fadein/out founction on fixed position div

  29. 29

    position top inside position fixed div always return the same value for every element jquery

HotTag

Archive