Progress bar does not show without text in localhost

Question

Implemented a progress bar using HTML/CSS & JQuery. So when i scroll down the page a blue bar appears at the top. This does not appear.

show.html

<div class="progress">
  <div class="bar"></div>
</div>

style.css

.progress {
  position: fixed;
  top:  0;
  left: 0;
  width: 100%;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #7fdbff;
}

scroll.js

$(document).on('scroll', function() {
  var pixelsFromTop = $(document).scrollTop()

  if (pixelsFromTop < 600) {
    $('section').css('background-color', '#fff0f0')
  } else if (pixelsFromTop < 1200) {
    $('section').css('background-color', '#F8D800')
  } else if (pixelsFromTop < 1600) {
    $('section').css('background-color', '#F6FFFF') 
  } else {
    $('section').css('background-color', '#cdccc7')
  }

  var documentHeight = $(document).height()
  var windowHeight = $(window).height()
  var difference = documentHeight - windowHeight
  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

})

But when i add text in the progress div the bar appears

eg

show

i get the following

but want it to work without the text

inspect element the width increases

html code

 <section class="day"> <h1><%= "To make #{number_to_currency @product.revenue}" %></h1> <p><%= "You need to make #{number_to_currency @product.monthly_amount} a month" %><br/> <%= "You need to make #{number_to_currency @product.daily_amount} a day" %> </p> <br/> <i class="fa fa-chevron-down" aria-hidden="true"></i> </section> <section class="people"> <h1>If you create & sell a product</h1> <p><%= "To make #{@product.revenue } 10,000 people to buy a #{number_to_currency @product.create_and_sell_product_10000} product" %><br/> <%= "To make #{@product.revenue } 5,000 people to buy a #{number_to_currency @product.create_and_sell_product_5000} product" %><br/> <%= "To make #{@product.revenue } 2,000 people to buy a #{number_to_currency @product.create_and_sell_product_2000} product" %><br/> <%= "To make #{@product.revenue } 1,000 people to buy a #{number_to_currency @product.create_and_sell_product_1000} product" %><br/> <%= "To make #{@product.revenue } 100 people to buy a #{number_to_currency @product.create_and_sell_product_100} product" %> </p> </section> 

Answer 1

this works fine for me. i just copied your code into a snippet and added the style body{min-height: 1000;} to your css. it's working just fine .

 $(document).on('scroll', function() { var pixelsFromTop = $(document).scrollTop() if (pixelsFromTop < 600) { $('section').css('background-color', '#fff0f0') } else if (pixelsFromTop < 1200) { $('section').css('background-color', '#F8D800') } else if (pixelsFromTop < 1600) { $('section').css('background-color', '#F6FFFF') } else { $('section').css('background-color', '#cdccc7') } var documentHeight = $(document).height() var windowHeight = $(window).height() var difference = documentHeight - windowHeight var percentage = 100 * pixelsFromTop / difference $('.bar').css('width', percentage + '%') }) 

 body{min-height: 1000px;} .progress { position: fixed; top: 0; left: 0; width: 100%; } .bar { position: absolute; top: 0; left: 0; width: 0; height: 3px; background-color: #7fdbff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress"> <div class="bar"></div> </div> 

Answer 2

HTML already has a progress bar tag:

<progress value="22" max="100"></progress>

this tag has 2 attributes, you should change the "value" attribute from your code. It's easier to use and control from JQuery or from javascript HTML DOM.

Answer 3

You need to have some content in your html so that the script can actually work. because there is nothing to scroll if you don't have any content.

look closely into the js you've added.

  var windowHeight = $(window).height()
  var difference = documentHeight - windowHeight
  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

Here you are incrementing/decrementing the percentage of your progress bar. The height of your whole document and the amount you scrolled from top of your document is used here to calculate your progress percentage.