Question

So the other day, I asked a question on Stackoverflow and got answers. But apparently after struggling with all this time, I am unable to find the resolution. The code that I have works in Chrome and Safari, but does not work in Firefox and IE.

Can anyone tell what is wrong this code?

$(window).bind('scroll', function() {
        if ($('body').scrollTop() + $(window).height() >= $('#cooler-nav').offset().top){   
        $.colorbox({width:"700px", inline:true, href:"#subscribepop"});
        $(window).unbind('scroll');
        }

});

Basically the goal is to get this colorbox to launch once the user views the div #cooler-nav…

Answer 1

The scroll event doesn’t propagate up the DOM tree. Try binding on the ‘body’ scroll, not the windows scroll and see if that fixes it for you.

Edit: I went back and checked my code where I’ve had to do this in the past, and realized I got it backwards. When I’ve done it in the past, I’ve used $(window).scrollTop() not body. So, that’d make your code look like:

$(window).bind('scroll', function() {
  if ($(window).scrollTop() + $(window).height() >= $('#cooler-nav').offset().top){   
    $.colorbox({width:"700px", inline:true, href:"#subscribepop"});
    $(window).unbind('scroll');
  }
});