Question

我想在滚动时为引导程序进度条设置动画（每次滚动动画时都应该重新启动）。我已经在stackoverflow上查找了解决方案，但是当我应用它们时，没有任何作用，因此进度条仍然“移动”而不是滚动而是页面加载。我想用js / jquery和关键帧，没有任何库。如果有人有小费，那就太好了。谢谢！

https://jsfiddle.net/hdxv4hrp/

代码： HTML：

<div class="spacer"></div>
<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%">
            <span class="title">60%</span>
        </div>
    </div>
</div>

<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%">
            <span class="title">20%</span>
        </div>
    </div>
</div>
<div style="width: 400px; margin: 50px auto">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%">
            <span class="title">90%</span>
        </div>
    </div>
</div>

的CSS：

.progress-bar {
    width: 0;
    animation: progress 1.5s ease-in-out forwards;
    .title {
        opacity: 0;
        animation: show 0.35s forwards ease-in-out 0.5s;
    }
}
@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes show {
    from {
        opacity: 0;
    }

JS：

$(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
        progress-bar.addClass("show");
    } else {
        progress-bar.removeClass("show");
    }
});

Answer 1

见下文我认为这就是你想要的我添加了一些css属性以保持进度条位于顶部固定位置，以便您可以跟踪进度并验证它是否正常工作

＆＃13;

$(document).ready(function() {
  $(document).scroll(function(event) {
    var topPos = $(this).scrollTop() + 100;
    var windowHeight = $(this).height();
    var docHeight = $(document).height();

    if (topPos >= $('#progress-1').position().top) {
      $('#progress-1 >.progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else if (topPos < $('#progress-1').position().top) {
      $('#progress-1 >.progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }


    if (topPos >= $('#progress-2').position().top) {
      $('#progress-2 > .progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else {
      $('#progress-2 > .progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }


    if (topPos >= $('#progress-3').position().top) {
      $('#progress-3 > .progress-bar').css({
          'max-width': '100%'
        })
        .attr('aria-valuenow', 100)
        .find('span.title').text('100%');
    } else {
      $('#progress-3 > .progress-bar').css({
          'max-width': '0%'
        })
        .attr('aria-valuenow', 0)
        .find('span.title').text('0%');
    }
  });
})

＆＃13;

.title {
  color: #000;
}

.image {
  background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050);
  height: 400px;
}

.progress-bar {
  width: 0;
  animation: progress 1.5s ease-in-out forwards;
  .title {
    opacity: 0;
    animation: show 0.35s forwards ease-in-out 0.5s;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="spacer"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-1">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-2">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
  <div class="progress" id="progress-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
      <span class="title">0%</span>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />

＆＃13;

如何使用javascript / jquery滚动动画引导进度条？

1 个答案: