当这些部分在视窗中可见时,向它们添加一个类
Add a class to the sections once they are visible in viewport
这就是我如何尝试,但条件永远不会触发…
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('section').each(function(){
var top = $(this).offset().top;
var bottom = top + $(this).height();
if(top <= scrollTop && bottom >= (scrollTop + vieportHeight) ){
$(this).addClass('visible');
console.log('Hola');
}else{
console.log(top,bottom,scrollTop,viewportHeight);
}
});
});
小提琴:http://jsfiddle.net/rYeMC/
你知道我做错了什么吗?
除了打字错误之外,还有一个轻微的数学错误。我发现确定元素是否在屏幕上的最简单方法是确定视口的顶部和底部,并将其与元素的顶部和底部进行比较:
$(document).ready(function () {
var viewport = $(window),
setVisible = function (e) {
var viewportTop = viewport.scrollTop(),
viewportBottom = viewport.scrollTop() + viewport.height();
$('section').each(function () {
var self = $(this),
top = self.offset().top,
bottom = top + self.height(),
topOnScreen = top >= viewportTop && top <= viewportBottom,
bottomOnScreen = bottom >= viewportTop && bottom <= viewportBottom,
elemVisible = topOnScreen || bottomOnScreen;
self.toggleClass('visible', elemVisible);
});
};
viewport.scroll(setVisible);
setVisible();
});
工作小提琴:http://jsfiddle.net/rYeMC/2/
看起来像你想要的:
http://jsfiddle.net/rYeMC/1/$(function () {
$(window).scroll(function (e) {
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('section').each(function () {
var top = $(this).offset().top;
var bottom = top + $(this).height();
if (top <= scrollTop && bottom >= (scrollTop + viewportHeight)) {
$(this).addClass('visible');
} else {
console.log(top, bottom, scrollTop, viewportHeight);
$(this).removeClass('visible');
}
});
});
});
您的代码一切正常。只需纠正错别字(vieport),并注意style属性会推翻您的外部css!
这是条件
if(scrollTop + viewportHeight >= top ){
$(this).addClass('visible');
}
相关文章:
- 我可以在json对象中添加一个函数吗
- 单击更改图标并通过javascript添加一个css类
- 将添加一个相同类型的事件附加或覆盖以前添加的具有相同名称的事件
- 有没有添加一个ng点击到md背景
- 如何为下拉列表的每个选项添加一个属性
- 如何使用Javascript在给定的句子中找到大写单词并在其前面添加一个字符
- 在iframe中加载url并添加一个类
- 添加一个setTimeout方法会使jQuery悬停方法忽略setTimeout方法中的函数
- Jquery添加一个类之后,如何应用css
- jQuery在悬停时只添加一个类
- 添加一个javascript函数来下载elfinder上的事件
- 仅首先需要使用jasmine从节点添加一个文件
- 尝试添加一个选项以使用append进行选择,但没有任何结果
- 简单的Javascript方式,在输入字段的每5位数字后添加一个空格
- 如何使用JavaScript's”;应用“;方法,在数组之前添加一个额外的参数
- 在xsl中为body onload添加一个值
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 添加一个元素,它's通过JS的类名
- 当我添加一个新数字时,如何获得一些数字的即时平均值
- 在跨度中每3个字符添加一个空格