jQuery基于滚动位置的淡入淡出元素

Question

Based on this thread here: Fade in element on scroll down using css

I used the code in the accepted answer (with a slight change to how the animation runs) on a simple test page and it worked perfectly. When I moved the code into a more complex page, it isn't working right. All I changed between my two pages was the selector for the element I want to animate. After some digging, it appears it is getting the position of the desired element wrong. What is it about the content on the page that would throw off the math on the position? I can't link to my page, unfortunately, without some work, so if possible I'd like some possible suggestions before I do that.

Here is the JQ I am using:

jQuery(document).ready(function(){

    $(window).scroll(function () {

        /* Check the location of each desired element */
        $('.fadein').each(function (i) {

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if (bottom_of_window > bottom_of_object) {

                $(this).delay(90 * i).animate({
                    'opacity': '1'
                }, 600);

            }
        });

    });

});

Thank you for any help!

Answer 1

The div was initially not visible.Check with

jQuery('.fadein').css('opacity');

when the page loaded(without scrolling). The opacity was ititially 0 and it was way down in the page and so it came to visible when you started scrolling. Will try to fix that in a few minutes.

Remove all Position=relative . It'll work.

Answer 2

You're using jQuery in your .ready function, but $ inside. Try this to create a namespaced alias:

jQuery(document).ready(function($) { ... });

or the simplified

jQuery(function($){ ... });

Answer 3

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

If you want to load images according to scroll i think this is what you want!

LazyLoad

Answer 4

Thanks for all the help, but I ended up replacing the above code with this:

http://imakewebthings.com/jquery-waypoints/

and it's working fine.

Thanks again everyone.