.pBar {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;{# change the background-color to the color of the "non-scrolled" progress bar #}
}
.progress-bar {
height: 8px;
background: #04AA6D; {# change the background-color to the color of the "scrolled" progress bar #}
width: 0%;
}
JS:
/ When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
Hi @Anton thank you for replying , do you know where i should write the JS code exactly ? because i tried in multiple codes who are related to the blog and nothing changed 😕
in my experience it's the best way to create a custom module with those code snippets and put each one in the corresponding place. Then you have to "just" place the module in the template and that's it. This works with everything.
If you're using themes you could also create a single JS file in your theme and link it either in the module or in the "layout.html"(the file where you define the <head> for example).
Another possible place to put it would be in the settings Settings-->Website-->Pages-->website-header HTML(or footer HTML).
By doing so this part will be loaded with the {{standard_header_includes}} in your template.
Thank you for responding , so basically nothing really changed 😕 i sent you a detailed message of what i did exactly i hope you can figure out what actually is the problem.