0

clipboard.png
上面的效果要怎么实现呢?
从首页滚动到 ul1-left-features 这个div位置时,会有这个效果,这个div中分两列,左侧又分三块分别为item1,item2,item3.
当滚动到item1时,第一图默认图向下滚动比如20px
当滚动到item2时,图片更换为对应itme2的图片
当滚动到item3时,图片更换为对应itme3的图片

右侧的图片在向下滚动时,它也会向下移动,移动的高度应该是个比例。

<div class="ul1-features-list">
    <div class="ul1-left-features">
        <div class="item-one"></div>
        <div class="item-two"></div>
        <div class="item-three"></div>
    </div>
    <div class="lock">
        <img src="item1.png" />
    </div>
</div>

我写了个测试,可以测试成功,但是还是实现不了这个效果:

$(function(){
    var offset = $('.item-one').offset().top;
    var fwidth = $('.item-one').height();
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $('.item-one').height();
        if(offset < scrollTop){
                $('.lock').addClass('item1');
        }
    })
});

现在有以下几个问题:

  1. 怎么判断滚动条确实是滚动到item1这个位置了?
  2. 怎么更换图片?
  3. 怎么操作图片向下移动?

谢谢能给我帮助的人,可以给个思路吗?最好是demo.

2018-05-28 提问
1 个回答
0

已采纳
  1. 你不是写出来了么,判断scrollTop大于定位的元素top就行
  2. 更换图片有2个思路:可以把三张图放仨img里,然后通过切换显示隐藏来模拟“更换”效果;或者你可以参考这篇文章里,使用content属性来替换img标签里的图片,这样只需要一个img标签就行了
  3. fixed定位?

撰写答案

推广链接