如果目标元素在屏幕上是可见的,则Jquery

时间:2013-08-23 05:56:55

标签: jquery wordpress dom scroll onload

我正在使用wordpress,我们有动态侧边栏。在侧边栏中我们有许多小部件。 我想要做的是显示屏幕上可见的divis(小部件)(onload - 页面加载后)。其他小部件将被隐藏(不透明0或类似的东西),但当我将滚动我希望该小部件(在屏幕上不可见)将以淡入淡出效果出现。

我使用此代码隐藏我的所有侧边栏块在加载时的不透明度为0。

我需要帮助来始终显示屏幕上可见的所有小部件,然后在滚动到其他小部件时进行淡入淡出效果。

感谢您的帮助!

$(document).ready(function(){
tiles = $("#sidebar1 div").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

滚动的功能正在发挥作用。问题是,当页面满载时,包含所有小部件的侧边栏类在不透明度0上(如display:none)。我需要的是当页面加载它将给屏幕上可见的所有小部件(例如10个小部件中的2个)提供不透明度1。然后,当用户将滚动它将显示其他具有淡入淡出效果的小部件。谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

你可以试试这个:

在窗口滚动上,您可以查看:

 tiles.each(function(){ 
      if($(this).css("opacity") == 0){
         //your hidden div
      }else{
         //your visible div
      }
 });

我希望它有所帮助。