我在我需要显示进度条的网站上使用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);
});
答案 0 :(得分: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()">
答案 1 :(得分:1)
花些时间找出答案,希望它可以帮助寻求解决方案的人。
您将不得不使用滚动魔术的进度方法。
.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>
答案 2 :(得分: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);