2014-09-26 47 views
0

嘿家伙即时尝试实现onscroll功能,但它不会在我的网站上工作。不透明度onscroll,脚本将不起作用

我到底做错了什么?

<head> 
<script> 
$(document).ready(function() { 

/* 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).position().top + $(this).outerHeight(); 
var bottom_of_window = $(window).scrollTop() + $(window).height(); 

/* If the object is completely visible in the window, fade it it */ 
if(bottom_of_window > bottom_of_object){ 

$(this).animate({'opacity':'1'},500); 

} 

}); 

}); 

});</script> 
</head> 

<body> 

<div id="container"> 

<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 
<div class="hideme">Fade In</div> 

</div> 
</body> 

,并链接到网站的全码: http://eren-web-design-development.tk/C-Html/landingpage/

回答

0

我看到在我的控制台错误

TypeError: $(...).ready is not a function 

。我认为$与代码中的其他库冲突。无论如何,试试这个,并检查它是否工作:

jQuery(document).ready(function($) { 
.. 

} 
+0

哇这太棒了,非常感谢。它现在是适当的,但是有可能在滚动之后查看隐藏容器中的一个,第二个是如果进一步滚动则查看隐藏容器。等等? 非常感谢您的回答 – jasongrimes 2014-09-26 14:00:42

+0

很酷。乐意效劳。你可以接受我的回答btw :) – Amit 2014-09-26 14:02:04

+0

这不是完美的,但尝试这样: if($(this).position()。top <$(window).scrollTop()+ 400){( $此).animate({ '不透明': '1'},500); } – Amit 2014-09-26 14:14:44

0

我看着你的网站,认为问题是你jQuery。 它可能没有正确加载。

$被定义。但是当我做$(“html”)时,它返回null。 当我使用jQuery(“html”)它确实返回正确。

其他东西正在占用$变量。

+0

谢谢你,那就对了。为了在我的页面上使用脚本,我需要给它一个唯一的功能ID。我使用Joomla,所以有很多可能性,它被用于另一个功能。 – jasongrimes 2014-09-26 14:03:58

+0

啊,好吧。祝你好运与您的其他网站。^ ^ – HugoC4 2014-09-26 14:13:10