Цвет фона индикатора выполнения не отображается в jquery - PullRequest
Новая
       3

Цвет фона индикатора выполнения не отображается в jquery

0 голосов
/ 23 февраля 2019

Привет всем, я пытаюсь показать индикатор выполнения для своего веб-сайта, но у меня возникла проблема не отображать background-color при прокрутке, помогите, пожалуйста, также найдите код ниже, начиная с html, css иjquery ...

HTML-код

<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>

CSS-код 

    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}

jQuery Code 

      $(window).scroll(function () {
          var s = $(document).scrollTop(),
              d = $(document).height() - $(window).height();
          $("#progressbar").attr('max', d);
          $("#progressbar").attr('value', s);
       });
   });

Здесь, пожалуйста, объясните, как я могу отображать цвет фона на свитке.Заранее спасибо !!

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вы должны рассчитать procentage и установить его в качестве ширины для `progressbar``. 

$(window).scroll(function () {
  var  d = $(document).height() - $(window).height(),
       s = $(document).scrollTop(); 
  var  width= (s / d) * 100 // in Procent
  $("#progressbar").attr('max', d);
  $("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}

.progress-bar-container{ 
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
0 голосов
/ 23 февраля 2019

Есть несколько проблем с вашим кодом, атрибут ширины HTML не поддерживает элемент div.Кроме того, атрибут value не поддерживается div.Для создания индикатора выполнения вы можете использовать CSS.Вместо обновления $("#progressbar").attr('value', s); значение просто обновите ширину элемента $("#progressbar").width(s);

Вот полный рабочий пример - 

  $(window).scroll(function () {
          var s = $(document).scrollTop(),
              d = $(document).height() - $(window).height();
          $("#progressbar").width(s);
   });
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.progress-bar-container{
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
	
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...