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

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.