Прогресс скроллинга страницы. Как сделать?

#javascript #html #css

Есть лендинг с фиксированным хедером. Нужно чтобы в нем отображалась полоса прогресса
скроллинга по странице, а именно по разделам. Как это осуществить? 
    

Ответы

Ответ 1

var 
    bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    winHeight = $window.height(),
    baseX = docHeight - winHeight;

$window.scroll(function(e) {      
    var x = ($window.scrollTop() / baseX) * 100;
    bar.css({'width': + x + '%'});
});
body{
    height:4000px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden; 
}

a {
  text-decoration: none;
}

ul li {
  display: block;
  float: left;
}

ul li a {
  display: block;
  padding: 1rem 2rem;
  font-family: sans-serif;
}

.nav {
  display: block;
  width: 100%;
  border-bottom: 2px solid #ccc;
  position: relative;
  position: fixed;
}

#bar{
    position:absolute;
    left: 0;
    bottom: -2px;
    background-color:red;
    width: 0px;
    height: 2px;
}​


    

      
Item 1
      
Item 2
      
Item 3
    
    

  




Вариант с якорями:



var 
    bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    winHeight = $window.height(),
    baseX = docHeight - winHeight;

var 
    lastId,
    topNav = $(".nav"),
    topNavHeight = topNav.outerHeight(),
    link = topNav.find("a");


scrollItems = link.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });
    

$window.scroll(function(e) {      
    var x = ($window.scrollTop() / baseX) * 100;
    bar.css({'width': + x + '%'});
  
  
  
  var fromTop = $(this).scrollTop()+topNavHeight;

  var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       
       link
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }   
});
body{
    height:4000px;
  padding-top: 5rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden; 
}

a {
  text-decoration: none;
}

ul li {
  display: block;
  float: left;
}

ul li a {
  display: block;
  padding: 1rem 2rem;
  font-family: sans-serif;
}

.nav {
  display: block;
  width: 100%;
  border-bottom: 2px solid #ccc;
  position: relative;
  position: fixed;
  top: 0;
}

#bar{
    position:absolute;
    left: 0;
    bottom: -2px;
    background-color:red;
    width: 0px;
    height: 2px;
}

.box {
  height: 20rem;
  padding: 2rem;
  line-height: 1.5rem;
  
}

.active a{
  background: red;
  color: #fff;
}


    

      
Item 1
      
Item 2
      
Item 3
    
    

  
  
  

    

      1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, excepturi.
    
    
    

      2 Lorem ipsum dolor sit amet.
    
    
    

      3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, at
debitis! Fuga, architecto, illum. Deleniti optio voluptatibus suscipit veniam, dicta.