CODEWITHSUNDEEP
jqueryhtmlscrollshow-hide
David
David

Reputation: 149

Show an element only when scrolling through certain divs

I have a site with a lot of blank space (for visual reasons). When a user scrolls through a blank space (usually 2000px or above marked by.spacer) I want another fixed div to show up.

The purpose is to make sure the user doesn't have to scroll through a lot of blank space. The div that would "pop-up" or appear would simple have text pointing them to the navigation bar. Then when the user isn't currently viewing .spacer, I want this div to disappear/hide. How can I do this using jquery? Thank you in advance for you time!

Upvotes: 0

Views: 1717

Answers (2)

ant_Ti
ant_Ti

Reputation: 2425

Here is example with multiple .spacer blocks: http://jsfiddle.net/ant_Ti/H8t6s/

Upvotes: 1

Eli
Eli

Reputation: 14827

Try this:

$(document).ready( function() {
    $(".spacer").hide(); // Hide your div by default
    $(".spacer").each(function() {
        var this = $(this);
        var topDistance = $(this).offset().top;
        $(window).scroll(function() {
            if($(window).scrollTop() > topDistance ) { 
                this.show(); 
            }
        });
    })
});

Maybe this is not exactly what you want but can give you some ideas on how to achieve it.

Upvotes: 1

Related Questions