我在需要显示进度条的站点上使用 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);
});
最佳答案
我花了一些时间弄清楚,希望它能帮助正在寻找解决方案的人。
你将不得不使用滚动魔法的进度方法。
.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>
关于javascript - ScrollMagic - 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31124521/