滚动时逐步增加不透明度
滚动时逐步增加不透明度
提问于 2016-05-04 16:09:57
我正在努力弄清楚如何修改一些现有的代码，我必须复制我在网站上看到的功能。如果你去这个网站：，当你向下滚动，你会看到图像增加不透明度。我的小提琴有点这样做，但我不知道如何应用一个较暗的不透明度，并使不透明度逐步增加，而不是一次全部。
我知道不透明的程度正在通过javascript被改变，我只是不知道如何修改它以得到我想要的结果。
var scrollPosition = $(this).scrollTop();
var docHeight = $(document).height();
var diff = docHeight - scrollPosition;
console.log(scrollPosition);
$('#demolition1').css({'opacity':diff/docHeight});<div id="home-main-img">
<img src="http:optimumwebdesigns.com/images/demolition1.jpg" alt="Demolition and Wrecking" id="demolition1">
</div>
<div class="height">
</div>
#home-main-img img{
width: 100%;
height: auto;
margin: 0;
display: block;
}
#home-main-img {
background: #000;
}
.height {
height:500px;
}
$(document).scroll(function(e){
var scrollPosition = $(this).scrollTop();
var docHeight = $(document).height();
var diff = docHeight - scrollPosition;
console.log(scrollPosition);
$('#demolition1').css({'opacity':diff/docHeight});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-04 16:32:53
我认为您的错误是将diff设置为文档高度，而不是要淡出的项的高度。
你的JS应该是：
var $item = $('#demolition1');
$(document).scroll(function(e) {
var $this = $(this),
scrollPosition = $this.scrollTop(),
itemHeight = $item.height(),
diff = itemHeight - scrollPosition;
console.log(scrollPosition);
$item.css({'opacity': (diff/itemHeight) });
});下面是一个实用的JS：https://jsfiddle.net/s6ta6bdc/
Stack Overflow用户
发布于 2016-05-04 16:32:24
您可以使用图像高度而不是文档来获得正确的不透明度百分比。
$(document).scroll(function(e){
var scrollPosition = $(this).scrollTop();
var imgHeight = $('#demolition1').height();
var diff = imgHeight - scrollPosition;
$('#demolition1').css({'opacity':diff/imgHeight});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37032938
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号