Прогрессбар в разделе только с использованием высоты раздела - PullRequest
Новая
       8

Прогрессбар в разделе только с использованием высоты раздела

0 голосов
/ 11 марта 2020

Я пытаюсь создать индикатор выполнения, подобный этому

https://media.giphy.com/media/YQBWgafigfEbtU5kwi/giphy.gif Вы можете увидеть GIF здесь, что я хочу

Я уже создал проект CodePen 

    jQuery(document).ready(function( $ ){ 
    $(document).ready(function() {
        var docHeight = $(window).height();
        var scrollPercent;
    	console.log(docHeight);
        $(window).scroll(function() {
          scrollPercent = ($(window).scrollTop() / docHeight) * 100;
    		console.log(scrollPercent);
          $('.scrollbarinner').height(scrollPercent + '%');
        });
      });
    });
    #sectionhd {
    height: 1000px;
    background: black;
    width: 100%;
      color:white;
      position:relative;
    }
    .scrollbar {
      position:absolute;
      top: 0px;
      right: 10px;
      background: red;
      width: 6px;
      height: 100%;
      overflow:hidden;
    }
    .scrollbarinner {
      position: relative;
      width: 6px;
      background: white;
    }
    
    #notSection {
      background: pink;
      height: 1000px;
      width: 100%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="notSection">
        This is the Section Where I don't want to show Scroll Bar
    </section>
    <section id="sectionhd">
     <div class="scrollbar">
       <div class="scrollbarinner"></div>
      </div>
      This is the Section Where I want to show Scroll Bar
    </section>
    <section id="notSection">
        This is the Section Where I don't want to show Scroll Bar
    </section>

вот ссылка

Я просто хочу сделать индикатор выполнения во 2-й секции, который можно завершить от начала до конца, используя высота раздела вместо документа или windows высота

...