Question

我的身体上有一个进度条。当我单击一个按钮时，将显示一个div，我们可以在该div上进行排序，我希望也有一个该进度条。我使用了进度条的jQuery代码

window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}

$('button').click(function() {
  if ($(this).hasClass("clicked")) {
    $(this).text("Open ↓");
  } else {
    $(this).text("Close ↑");
  }
  $('.blue-container').toggleClass('In');
  $('body').toggleClass('hideOverflow');
  $(this).toggleClass("clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>

<button> Open ↓</button>

<div class='blue-container'>
  <div class='blue'>
    <p>Hello ! Scroll down. I would like to have a progress bar for this div, like the body.</p>
  </div>
</div>

Answer 1

您需要创建与在窗口上设置的相同的进度设置器功能，只是此控件应使用蓝色容器的可滚动元素进行滚动位置测量。

请记住，关闭蓝色框后，您不再需要从该框设置进度，因此您应该取消绑定setter函数（$scroller.off('scroll', progressSetter)）。下次打开蓝色框后，它将再次绑定。

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}

$('button').on('click', function() {
    var $container = $('.blue-container'),
        $scroller = $container.find('.blue'),
        $btn = $(this),
        $bar = $('#myBar'),
        progressSetter = function () {
          var height = $scroller[0].scrollHeight - $scroller.outerHeight();
          $bar.css({
            height: $scroller.scrollTop() / height * 100 + '%'
          });
        };

  if ($btn.hasClass("clicked")) {
    $btn.text("Open ↓");
    $scroller.off('scroll', progressSetter)
  } else {
    $btn.text("Close ↑");
    $scroller.on('scroll', progressSetter)
  }

  $container.toggleClass('In');
  $('body').toggleClass('hideOverflow');
  $btn.toggleClass("clicked");
});

https://jsfiddle.net/uo34ru7d/76/

如我所见，您使用了教程中的示例代码。尝试弄清楚此滚动绑定函数是如何工作的（以及事件绑定本身），您将能够为窗口和蓝色容器创建一个函数，使其成为您的功课；）

div中的进度栏

1 个答案: