jQuery滚动事件触发在底部
[英]Jquery scroll event triggers at bottom
问题描述
在http://www.mtjmedia.nl/Homepage/contact/上，我有一个简单的jquery代码，如果您正在滚动，该代码应可使大的社交图标出现/淡入。
而是，当您仅滚动到页面底部时，将显示三个图标。
有人知道问题出在哪里吗？
var $win = $(window);
var $img = $('.fadeInScroll');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev = $self.offset();
if (prev) {
var pt = 0;
pt = prev.top - $win.height();
$self.css({
opacity: (scrollTop - pt) / ($self.offset().top - pt)
});
} else {
$self.css({
opacity: 1
});
}
});
}).scroll();
我正在使用以下脚本： http : //trulycode.com/bytes/simple-appear-on-scroll/
3 个解决方案
解决方案1
0 2015-02-25 12:39:21
将代码移到加载函数$(function() { }); 如下所示。 看来问题是由调用var $win = $(window);引起的var $win = $(window); 页面完全加载之前
<script type='text/javascript'>
$(function() {
var $win = $(window);
var $img = $('.fadeInScroll');
$win.on('scroll', function() {
var scrollTop = $win.scrollTop();
$img.each(function() {
var $self = $(this);
var prev = $self.offset();
if (prev) {
var pt = 0;
pt = prev.top - $win.height();
$self.css({
opacity: (scrollTop - pt) / ($self.offset().top - pt)
});
} else {
$self.css({
opacity: 1
});
}
});
}).scroll();
});
</script>
解决方案2
0 2015-02-25 14:19:57
通过将window对象更改为document对象，并从事件附件的末尾删除.scroll() ，代码似乎运行良好。
看一下复制场景的jsfiddle，只需在预览面板中向下滚动即可查看结果：
http://jsfiddle.net/7kjj9z1c/2/
希望有帮助！
解决方案3
-1 2015-02-25 11:11:04
像下面的示例一样，尝试在方法末尾删除.scroll（）。
$( window ).scroll(function() {
console.log('Action here');
});
这里是一个全功能的例子。 希望能有所帮助。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(window).scroll(function() {
$('#number').html(parseInt($('#number').html())+1);
});
</script>
<style>
body{
height: 3000px;
}
span{
display:inline-block;
position:relative;
}
div.column{
position:relative;
height:2500px;
width:30px;
display:inline-block;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
#number{
font-size:340px;
position:fixed;
left:100px;
height: 40%;
width:40%;
display: inline-block;
}
</style>
</head>
<body>
<span>dO SCROLL:</span><br>
<div class="column"></div>
<div id="number">0</div>
</body>
您滚动的每个像素都会触发事件，并会增加计数器。
滚动事件 JQuery - 检测底部页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.