Rails5 + JQuery progress bar not functioning

Implementing a JQuery progress bar so when you scroll down it should show a green bar across the top. When I start scrolling the progress bar does not appear. I use inspect element on the bar div class . The element shows the width % going up . but no progress bar?

scroll.js $(document).on('scroll', function() { var pixelsFromTop = $(document).scrollTop() var documentHeight = $(document).height() var windowHeight = $(window).height() var difference = documentHeight - windowHeight var percentage = 100 * pixelsFromTop / difference $('.bar').css('width', percentage + '%') }) show.html.erb div class="progress">

<%= "To make #{number_to_currency @product.revenue}" %>

<%= "You need to make #{number_to_currency @product.monthly_amount} a month" %>
<%= "You need to make #{number_to_currency @product.daily_amount} a day" %>

application.scss

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

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

application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
// require turbolinks
//= require_tree .

looking at the logs its not finding scroll but its showing the width element going up,

Started GET "/products/scroll.js" for 127.0.0.1 at 2017-08-14 12:27:17 +0100
Processing by ProductsController#show as JS
Parameters: {"id"=>"scroll"}
Product Load (0.4ms) SELECT "products".* FROM "products" WHERE "products"."id" = $1 LIMIT $2 [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 3ms (ActiveRecord: 0.4ms)

ActiveRecord::RecordNotFound (Couldn't find Product with 'id'=scroll):

app/controllers/products_controller.rb:67:in `set_product'

added the url for the src was incorrect