lock a div on header when window scrolled past element

Question

I want a circle div to lock in the header when the user scrolls past in.

I'm using the following code but it doesn't work

var circle$ = $('.circle'),
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
    window$ = $(window);

window$.scroll(function() {
    if (window$.scrollTop() > oCircleBottom) {

    }
}.bind(this));

I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?

Answer 1

Enclose your code in $(document).ready function

$(document).ready(function () {
    var circle$ = $('.circle'),
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
    window$ = $(window);

    window$.scroll(function () {
    if (window$.scrollTop() > oCircleBottom) {
        $('.circle').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } 
    else{
               $('.circle').css({                      
                position: 'static'});
    }
  }.bind(this));

});

Answer 2

You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example

However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example

Hence, its better to subtract the window height. jsFiddle

  $(window).bind('scroll', function() {

    if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
       //Do you stuff
    }
});