CODEWITHSUNDEEP
jquery
CuriousDev
CuriousDev

Reputation: 1275

Displaying a Div depending on a condition

I have seen pages which display div's when the user scrolls to the end of the page. When the user starts scrolling up, the div disappears. How can I do this in jQuery. I am using v1.8

So far I have tried this

if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert('bottom')
}

Upvotes: 0

Views: 104

Answers (3)

Seimen
Seimen

Reputation: 7250

You have to check that on scrolling:

var $win = $(window),
    $doc = $(document),
    $target = $('#target');
// save relevant elements so they don't have to be selected on each scroll call

$win.scroll(function() {
    $win.scrollTop() + $win.height() == $doc.height()
    ? $target.show()
    : $target.hide();
});

jsfiddle

Upvotes: 2

Timm
Timm

Reputation: 12753

Example: http://jsfiddle.net/7EzUf/

You put your code in a .scroll handler for the window element. The function will be fired whenever the user scrolls.

$(window).scroll(function(){
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('#bottom').fadeIn();
    } else {
        $('#bottom').fadeOut();
    }
});

Upvotes: 2

CR41G14
CR41G14

Reputation: 5594

See it working here jsFiddle

the alert div appears when you hit the bottom other wise hides

Upvotes: 0

Related Questions