滚动位置时显示Div

首先我想参考一下这个网站：http://annasafroncik.it/ 我喜欢看动画的方式。在jquery中创建类似的函数很难吗？有没有任何插件来创建这样的效果？滚动位置时显示Div

希望有人会帮助我。

2012-02-01 idbranding

基本上，你想要一个“hideme”类添加到你想要隐藏的每一个元素（然后你设置类“不透明度：0”;

然后，使用jQuery你设置一个$（窗口）。滚动（）事件，以核对您的可视窗口的底部边缘的每一个“hideme”元素的底部位置

下面是它的肉......

/* 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/

来源

2012-02-01 16:08:00

哇，我喜欢这个例子，非常清晰，干净的代码！问题解决了 – idbranding 2012-02-01 16:24:19

你提到了一个插件，所以这里是我刚刚扔在一起的一个：http://timothyaaron.com/js/fadein.on.scroll.js 它自动隐藏当前视图外的* all *元素，并淡化它们在滚动中（使用“hideme”类元素，所以请确保你没有使用它的任何其他原因）。 – 2012-02-01 16:26:39

哇，感谢您的帮助！非常感谢 – idbranding 2012-02-01 16:36:12

插件？也许吧，但是你肯定可以自己构建你可以用jQuery想象的动画组合。如果你牢牢掌握选择器和CSS，那么天空就是极限！我建议从jQuery website开始，并检查出some examples。

为了帮助实现滚动，并且如果您已经熟悉jQuery，可能会给出一些建议，您可以尝试以下方法...找出页面上多远，div，监听滚动事件，当div成为焦点时（即：该页面已经滚过div的位置），请运行动画。例如：

<div id="my_div">Some content</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var my_div = $("#my_div"); 
     var div_top = my_div.offset().top; 

     $(document).scroll(function() { 
      if (div_top <= $(document).scrollTop()) { 
       // do some cool animations... 
      } 
     }); 

    }); 

</script>

我希望我没有搞乱我的语法！

来源

2012-02-01 14:51:58

感谢这个解决方案！ – idbranding 2012-02-01 16:36:34

-1

试试这个。它的工作对我来说

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
    $("body").addClass("allowshow"); 
    } else { 
    $("body").removeClass("allowshow"); 
    } 
});

和这个CSS是

.showmydiv{display:block}

来源

2015-06-26 12:10:52

滚动位置时显示Div

回答

相关问题