Question

How can I make it so when you are scrolled far enough down the page (so that #notification is not visible), a DIV shows, using jQuery? The only condition is my code:

jQuery(function($){
    $("#fake").watch('width', function(){
        $('#notibubble').fadeIn(250, function() {
            $('#notibubble').delay(1450).fadeOut(250, function() {
                // Animation complete.
            });
        });
        $("#notification").effect("pulsate", { times:3}, 500);
    });
});

So it can’t just show up when you scroll, the .watch event has to be triggered first. How can I do this?

Answer 1

You could use .data() to store if the watch event had been triggered. Then it would just be a matter of checking for this in your .scroll() function:

jQuery(function($){
    $("#fake").watch('width', function(){
        // current watch function

        // store that a watch event has fired  
        $("#notification").data('watched', true); 
    });

    $(window).scroll(function(){             
        if($("#notification").data('watched') === true){
            // Check if #notification is out of view by using the window's 
            // scrollTop() and the current position and height of #notification
        }       
    });
});