滚动位置时显示Div [英] Show Div when scroll position

问题描述

首先，我想参考此网站: http://annasafroncik.it/ 我喜欢动画的呈现方式. 在jquery中创建类似的函数难吗? 是否有任何插件可以创建这样的效果?

First of all i would like to refer to this website: http://annasafroncik.it/ I love the way the animations come into view. Is it hard to create a similar function in jquery? Are there any plugins to create such an effect?

希望有人会帮助我.

推荐答案

基本上，您想要向要隐藏的每个元素添加"hideme"类(然后将其设置为"opacity:0";

Basically, you want to add a "hideme" class to every element you want hidden (then you set that class to "opacity:0";

然后，使用jQuery设置一个$(window).scroll()事件，以根据可见窗口的底部边缘检查每个"hideme"元素底部的位置.

Then, using jQuery you set a $(window).scroll() event to check the location of the bottom of every "hideme" element against the bottom edge of your visible window.

这是它的肉...

/* Every time the window is scrolled ... */
$(window).scroll( function(){

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

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

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

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});

这是完整的jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/

Here's a full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/

这篇关于滚动位置时显示Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！