CODEWITHSUNDEEP
javascriptjquerycssuiscrollview
Manoz
Manoz

Reputation: 6597

How to fadeIn to fadeOut elements while scrolling?

I have more than 70 divs on my page.

I don't want to show all the divs at once until user scrolls page. I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.

But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.

However i gave it a try-

$(function(){
   $(window).css("overflow","hidden");
    var lengthy= $('.content').length;
         alert(lengthy);  

        var scrollbottom= $(window).scrollTop()+$(window).height();

        $(window).scroll(function(){

             $(document).css("overflow","hidden");
            if($(window).height() >scrollbottom)
            {
                $(document).fadeIn();
            }
        });


});

Jsfiddle

How can this be done?

Upvotes: 2

Views: 452

Answers (1)

AnaMaria
AnaMaria

Reputation: 3621

EDIT your Jquery to somthing like this

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...

This Example will show you what i think you want http://www.webresourcesdepot.com/dnspinger/

Upvotes: 1

Related Questions