Need help sticking div to top after scrolling past it

Question

I made an illustration of what I am trying to do: https://i.stack.imgur.com/GLEuM.png

This is what I am looking to do:

Stick '#Stick to Top' to top of page after scrolling past '#Header'.
Hide '#Stick to Top' until scrolled past '#Header'. Hide again when scrolled back up to '#Header'.

How can I achieve this?

You can use jquery-visible plugin to test whether a header is partially visible or not and then adjust the styles appropriately: http://jsfiddle.net/xyy4pdca/. — DRD, Oct 29 '14 at 22:14

score 0 · Answer 1 · answered Oct 29 '14 at 21:59

I had a similar issue where I wanted the header to stay locked to the top of the screen. Try the following (untested) code.

    if($(window).scrollTop() > Height_of_Header){
        //begin to scroll
        $("#div").show();
        $("#div").css("position","fixed");
        $("#div").css("top",0);
    }
    else{
        //hide
        $("#div").hide();
    }

Need help sticking div to top after scrolling past it

1 Answers1