我正在使用wordpress,我们有动态侧边栏。在侧边栏中我们有许多小部件。我想做的是显示屏幕上可见的divis(小部件)(onload - 页面加载后)。其他小部件将被隐藏(不透明度0或类似的东西),但当我滚动时,我希望该小部件(在屏幕上不可见)将以淡入淡出效果显示。
我使用此代码隐藏我的所有侧边栏块在opacity=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)。我需要的是当页面加载时它将opacity=1
给予屏幕上可见的所有小部件(例如10个小部件中的2个)。然后,当用户滚动时,它将显示其他具有淡入淡出效果的小部件。
答案 0 :(得分:0)
提取使这些小部件可见的代码块并将其放入函数中。然后为指向此函数的scroll
和“DOM ready”添加一个处理程序。
// Determine show or hide
function showOrHide(){$(document).ready(function(){
$("#sidebar1 div").each(function(i) {
var a = $(this).offset().top + $(this).height();
var b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
}
// Assign to both
$(document).ready(showOrHide);
$(window).scroll(showOrHide);
现在这里有性能损失。每秒滚动几次火焰。您不希望在DOM中查询这些元素,并且每秒多次运行each
。为此'我会留给你搜索(经常在SO和CodeReview上询问)