Question

我正在努力弄清楚如何修改现有代码，我必须复制我在网站上看到的功能。如果你去这个网站：，当你向下滚动时，你会看到图像获得不透明度。我的小提琴有点做到这一点，但我无法弄清楚如何应用更暗的不透明度并逐渐增加不透明度而不是一次性添加。

我知道通过javascript改变了不透明度，我只是不知道如何修改它以获得我想要的结果。

var scrollPosition = $(this).scrollTop();
            var docHeight = $(document).height();
            var diff = docHeight - scrollPosition;
        console.log(scrollPosition);
        $('#demolition1').css({'opacity':diff/docHeight});

Fiddle

<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});
});

Answer 1

我认为您的错误是将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/

Answer 2

您可以使用图像高度而不是文档来获得正确的不透明度百分比

$(document).scroll(function(e){
        var scrollPosition = $(this).scrollTop();
        var imgHeight = $('#demolition1').height();

        var diff = imgHeight - scrollPosition;
    $('#demolition1').css({'opacity':diff/imgHeight});
});

try fiddle updated

滚动时逐步添加不透明度

2 个答案: