Javascript 滚动魔术-进度条_Javascript_Jquery_Scrollmagic

Javascript 滚动魔术-进度条

javascript jquery

Javascript 滚动魔术-进度条,javascript,jquery,scrollmagic,Javascript,Jquery,Scrollmagic,我在一个需要显示进度条的站点上使用scrollMagic库。该栏将显示用户在页面上的位置。当用户向上或向下滚动时，进度条的宽度将发生变化。我似乎无法让它与scrollMagic库一起工作。这是我在其他事情中尝试过的。谢谢 var controller = new ScrollMagic.Controller(); $(function progressBar() { var tween = TweenMax.fromTo("#progress", 1, { width: "0%"

我在一个需要显示进度条的站点上使用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);
});

我不知道这对你有多大帮助，但你应该试试“鼠标滚轮”活动：

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

window.addEventListener（'mousewheel'，函数（e）{
wDelta=e.wheelDelta<0？假：真；
if（wDelta）
其他的
});

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

<body onscroll="doStuff()">

我不知道这对你有多大帮助，但你应该试试“鼠标滚轮”活动：

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

window.addEventListener（'mousewheel'，函数（e）{
wDelta=e.wheelDelta<0？假：真；
if（wDelta）
其他的
});

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

<body onscroll="doStuff()">

我花了一些时间才弄明白，希望它能帮助正在寻找解决方案的人

你必须使用滚动魔术的进度方法

.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>

我花了一些时间才弄明白，希望它能帮助正在寻找解决方案的人

你必须使用滚动魔术的进度方法

.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>

如果我理解正确，您想在标题中创建进度条吗？我有一个包含整个页面的div.page。在我的标题中有一个div.header\uuuu进度

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);

如果我理解正确，那么您希望在标题中创建进度条吗？我有一个包含整个页面的div.page。在我的标题中有一个div.header\uuuu进度

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);

您在控制台中有错误吗？您在控制台中有错误吗？谢谢您的回复。我在使用scrollMagic库之前尝试过这个。我只是简单地将“$（'.progressBar'）.css（“宽度”、“+=1%”）放在if中，将“$（'.progressBar'）.css（“宽度”、“-=1%”）放在else中。它的问题是，根据我滚动的速度，javascript每次都会以不同的方式呈现动画，并且在我到达页面底部之前，进度条会到达末尾：（谢谢你的回复。我在使用scrollMagic库之前尝试过这一点。我只是在if和$（'.progressBar'）.css（“宽度”，“-=1%”）。它的问题是，根据我滚动的速度，javascript每次都会以不同的方式呈现动画，进度条在我到达页面底部之前到达末尾：（您好，我一直在尝试使此progressbar在多个固定部分的场景中工作，但运气不佳。您能帮忙吗？您好，我一直在尝试使此progressbar在多个固定部分的场景中工作，但运气不佳。您能帮忙吗？