代码之家 › 专栏 › 技术社区 › vw88

在水平滚动单独的容器时,如何更改文本或元素?

scrollmagic jquery-waypoints parallax javascript

0

vw88 · 技术社区 · 7 年前

当您水平滚动文本上方的容器时,我试图更改文本。触发器将基于像素或百分比,因此,例如,如果滚动到图像宽度的20%,文本将发生更改。

这方面的好方法是什么?

起初,我试图使用waypoint,但似乎不起作用,因为水平滚动时,偏移功能无法根据百分比或像素进行设置。

这是设置--

#overflow-scroll,
#overflow-scroll-offset {
  overflow: auto;
  height: 200px;
  background: none;
}

#image-scroll {
  width: 1000px;
  height: 100%;
  margin-left: 150px;
  background: pink;
  color: #fff;
}

.hide {
  display: none;
}

p {
  text-align: center;
}

<div id="overflow-scroll" class="mt-3">
  <div id="image-scroll">
  </div>
</div>

<div class="blocks">
  <p class="block1">One text</p>
  <p class="block2 hide">Two text</p>
  <p class="block3 hide">Three text</p>
</div>

JS fiddle link

1 回复 | 直到 7 年前

1

Akash 7 年前

您可以通过添加小的jQuery脚本来实现这一点。

$(document).ready(function(){
    $("#overflow-scroll").scroll(function(){
        var scrollRight = 200; //200 pixels
        if($("#overflow-scroll").scrollLeft() > scrollRight){
            //show block 2 and hide block1 text
            $(".block1").hide();
            $(".block2").show();
        }else{
            $(".block1").show();
          $(".block2").hide();
        }

    })
})

希望这就是你想要的。

这是小提琴 link