fixed/floating div element when scrolling

Question

I'm trying to search for this on the web, but I'm not sure what to look for exactly. I'm trying to find out how to create a div element that will be fixed, or float ONLY when the TOP of the element reaches the TOP of the window browser view. For instance, if an element is half way of the page, when you continue to scroll down, that element will stay put UNTIL its about to disappear, then it would want to stay at the top of my browser (fixed).

Answer 1

I think I'm doing something similar to what you want to do. Try out the following code, put whatever you need in notification div and leave the anchor one alone.

<div id="notification-anchor"></div>
<div id="notification"></div>

<script type="text/javascript"> 
    $(function() {
        var a = function() {
            var b = $(window).scrollTop();
            var d = $("#notification-anchor").offset().top;
            var c = $("#notification");
            if (b > d) {
                c.css({position:"fixed",top:"0px"})
            } else {
                c.css({position:"absolute",top:""})
            }
        };
        $(window).scroll(a);a()
    });
</script> 

Edit: You should note, this requires you to include JQuery if that's not obvious to you.