1

我在需要显示进度条的网站上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我尝试过的。谢谢！

var controller = new ScrollMagic.Controller();
$(function progressBar() {
  var tween = TweenMax.fromTo("#progress", 1, {
    width: "0%"
  }, {
    width: "100%"
  });
  var scene = new ScrollMagic.Scene({
      triggerElement: ".header-wrap",
      duration: "100%"
    })
    .setTween(tween)
    .addTo(controller);
});
4

3 回答 3

3

花了我一些时间来弄清楚，希望它可以帮助正在寻找解决方案的人。

您将不得不使用滚动魔法的进度方法。

.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width',progressvalue +"%");
})

这是整个代码，它的外观

var pin = new ScrollMagic.Scene({
    triggerHook: "onLeave",
    duration: "1100%",
    triggerElement: "#pin"
})
.setPin("#pin")
.setTween(tl)
.setClassToggle("#pin", "active")
// Add this code
.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width', progressvalue + "%");
})
.addTo(controller);

在 html 中添加一个要显示进度的 div。

<div class="scroll-progress" style="width:0%; height:5px; background:#0090c6; position:fixed; bottom:0; left:0; z-index:9999"></div>
于 2018-10-10T10:57:43.530 回答
1

我不知道这对您有多大帮助，但您应该尝试“鼠标滚轮”事件：

window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? false : true;
if(wDelta)
    <mousewheel goes up>
else
    <mousewheel goes down>
});

或者如果您不关心用户滚动的方向，甚至还有一个 onscroll 属性：

<body onscroll="doStuff()">

有关 onscroll 的更多信息

于 2015-06-29T20:31:17.163 回答
0

如果我理解正确，那么您想在标题中制作进度条吗？我有包含整个页面的 div.page 。在我的标题中，我有一个 div.header__progress

let progressTween = new TimelineMax()
.to('.header__progress', 1, {
  width: '100%'
});

let progressScroll = new ScrollMagic.Scene({
  triggerElement: '.page',
  triggerHook: 0,
  duration: '100%'
})
.setTween(progressTween)
// .addIndicators()
.addTo(controller);
于 2020-05-12T10:20:11.300 回答