ScrollMagic -进度条
ScrollMagic -进度条
提问于 2015-06-30 04:00:06
我在一个需要显示进度条的站点上使用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);
});回答 3
Stack Overflow用户
发布于 2018-10-10 18:57:44
我花了一些时间才弄明白，希望它能帮助正在寻找解决方案的人。
您将不得不使用滚动魔术的进度方法。
.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>Stack Overflow用户
发布于 2015-06-30 04:31:17
我不知道这会对你有多大的帮助，但你应该尝试一下'mousewheel‘事件：
window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? false : true;
if(wDelta)
<mousewheel goes up>
else
<mousewheel goes down>
});或者，如果你不关心用户滚动的方向，甚至还有一个onscroll属性：
<body onscroll="doStuff()">More info for onscroll
Stack Overflow用户
发布于 2020-05-12 18:20:11
如果我没理解错的话，那么你想在标题中做一个进度条？我有一个包含整个页面的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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31124521
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号