Develop Reference

Vertical Scroll Indicator

Trying to create a Scroll Indicator, which would not be horizontal, but vertical. The problem is that when I try to start scrolling the bar that indicated the position isn't scaling...
HTML
<div id="scrollbar">
<div id="bar">
</div>
<div>
CSS
#scrollbar
{
width: 1%;
height: 100%;
padding: 0;
margin: 0 0 0 auto;
right: 0;
top: 0;
position: fixed;
visibility: visible;
background-color: transparent;
}
#scrollbar #bar
{
width: inherit;
height: 0%;
background-color: #ccc;
}
JS
var bar = document.getElementById("bar");
window.onscroll = function () { scrollIndicator() };
window.onload = function () { scrollIndicator() };
function scrollIndicator()
{
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100;
if(height > 0)
{
scrolled = (winScroll / height) * 100;
}
bar.style.height = scrolled + "%";
}
I absolutely cannot find the problem...

your web page doesn't have enough content for it to scroll, hence scroll event isn't firing.
You need to fix the html, #scrollbar is missing a closing div tag and add enough content on the webpage so that it scrolls.
You also need to change the width of #bar from inherit to 100%.
var bar = document.getElementById("bar");
window.onscroll = function() {
scrollIndicator()
};
function scrollIndicator() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100;
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
bar.style.height = scrolled + "%";
}
#scrollbar {
width: 1%;
height: 100%;
padding: 0;
margin: 0 0 0 auto;
right: 0;
top: 0;
position: fixed;
background-color: transparent;
}
#scrollbar #bar {
width: 100%;
height: 0%;
background-color: blue;
}
.section {
height: 100vh;
}
.section:nth-child(even) {
background: green;
}
.section:nth-child(odd) {
background: red;
}
<div id="scrollbar">
<div id="bar"></div>
</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

how to calculate document height and add width to div to it will show much page is left

i want to add width to my div by the how much page height is so it can show how much page is left if page scrolled to bottom div width should be 100% and if it at middle it should be half
window.onscroll = function () {
addLoaderWidth();
}
function addLoaderWidth() {
var addWidth = window.pageYOffset;
document.getElementById('load').style.width = addWidth + 'px';
}

Your javascript works just fine. I had to add some style for the #load element, and add a container around the element that was scrollable. But it seems to work as expected:
window.onscroll = function () {
addLoaderWidth();
}
function addLoaderWidth() {
var addWidth = window.pageYOffset;
document.getElementById('load').style.width = addWidth + 'px';
}
#load {
height: 10px;
width: 0px;
background-color: blue;
position: fixed;
top: 0;
left: 0;
transition: all .2s ease;
}
.container {
height: 1000px;
position: relative;
}
<div class="container">
<div id="load"></div>
</div>

You can do this by calculating the percentage that was scrolled down and use that value as the width of the element.
const progress = document.getElementById('progress');
window.addEventListener('scroll', function() {
let d = document.documentElement, b = document.body;
let percentage = (d.scrollTop||b.scrollTop) / ((d.scrollHeight||b.scrollHeight) - d.clientHeight) * 100;
progress.style.width = percentage + '%';
});
#progress {
position: fixed;
top: 0;
left: 0;
height: 8px;
width: 0%;
background-color: #48E;
}
#content {
height: 2000px;
}
<div id="progress"></div>
<div id="content"></div>

Scrolling Progress Bar

What I'm trying to do is implement a progress bar to indicate how close one is to the end of the page in vanilla JavaScript. However, I'm running into a few issues.
First of all, although the body element is being scrolled, document.body.scrollTop always returns 0. I've sorted this out by using document.scrollingElement.scrollTop.
It's been a while since I last implemented a feature like this, so I took to Stack Overflow and found this thread, which jogged my memory a bit. From what I remember about the last time I implemented this feature, the formula should be something like the following, which was mentioned in that thread.
const progressBar = document.getElementById('footer__progress_bar')
const totalValue = document.body.scrollHeight - window.innerHeight
document.body.onscroll = () => {
let currentValue = document.scrollingElement.scrollTop
let offset = (currentValue / totalValue) * 100 - 100 + '%'
progressBar.style.left = offset
}
Unfortunately something is off with the script above and I can't seem to figure out what it is. For some reason the value of offset overshoots (and sometimes undershoots) the mark. I've created a CODEPEN and the overshoot problem is persisting, so it seems as if the issue is the formula itself. Nonetheless, when I look at the numbers (window.innerHeight, body.scrollTop, et cetera), none of them seem to add up. Below are the numbers.
window.innerHeight ..................... 779
document.body.clientHeight ............ 3210
document.body.offsetHeight ............ 3212
document.body.scrollTop .................. 0
document.scrollingElement.scrollTop ... 2646
I've also noticed some super strange behaviour. document.body.clientHeight and document.body.offsetHeight will randomly change values when I refresh the page, so that they're almost constantly jumping back and forth from X to Y.
Notably, the body element itself has a height of auto and no vertical margins, albeit some of its children do have vertical margins. The main element, which is where I'm embedding everything from the database, also has height: auto, yet it also returns 0 when I check its scrollTop.
Does anybody have any idea where I'm going wrong or why the numbers aren't adding up?

Please see the changes I have applied to your CODEPEN
body {
height: 300vh;
background: black
}
footer {
width: 100vw;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
background: #fff
}
#footer__progress_bar {
height: 20px;
background: blue;
width: 0%;
text-align: center
}
<footer>
<div id="footer__progress_bar">0%</div>
</footer>
<script>
window.onscroll = function() { ScrollIndicator() };
function ScrollIndicator() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById( 'footer__progress_bar' ).style.width = scrolled + "%";
document.getElementById( 'footer__progress_bar' ).innerHTML = Math.round( scrolled ) + "%"
}
</script>

You can use the PrognRoll jQuery plugin:
Examples
Body demo on CodePen
<body>
<!-- Content -->
</body>
Display a scroll progress indicator:
$(function() {
$("body").prognroll();
});
or create a scroll indicator with CSS and JavaScript (without plugin).
See the live example below:
window.onscroll = function() {
ScrollIndicator()
};
function ScrollIndicator() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("headerBar").style.width = scrolled + "%";
console.log(Math.round(scrolled * 100) / 100);
document.getElementById("footerBar").style.width = scrolled + "%";
document.getElementById("footerBar").innerHTML = Math.round(scrolled) + "%";
}
body {
height: 2000px;
text-align: center;
font-family: arial;
color: #333;
margin: 0px;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
width: 0%;
}
.content {
padding: 50px 0;
margin: 50px auto 0 auto;
width: 80%;
}
footer {
width: 100vw;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
background: #ccc;
}
.footer-progress-bar {
height: 20px;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
width: 0%;
text-align: center
}
<div class="header">
<h2>Scroll Indicator</h2>
<div class="progress-container">
<div class="progress-bar" id="headerBar"></div>
</div>
</div>
<div class="content">
<h2>Scroll down to see how it works</h2>
</div>
<footer>
<div class="footer-progress-bar" id="footerBar">0%</div>
</footer>

Moving element horizontally on scroll

Trying to scroll an element horizontally right off the screen as the page scrolls down. I'd also like to be able to scroll back up and have the element be in the original position.
I'm having trouble getting the speed and reverse scroll to work just right. Any ideas what I can do?
$(document).ready(function () {
var $horizontal = $('.horizontal');
var startPosition = $horizontal.position();
var speed = 14;
var lastScrollTop = 0;
i=0
$(window).scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
i++;
} else {
// upscroll code
i--;
}
lastScrollTop = st;
newPos = startPosition.left+(i*speed)
$horizontal.css({
'left': newPos
});
});
});
.container {
min-height: 50000px;
width: 100%;
overflow: hidden;
}
.horizontal {
position: fixed;
width: 50px;
background: url(http://www.pngpix.com/wp-content/uploads/2016/06/PNGPIX-COM-Renault-Megane-RS-Trophy-White-Car-PNG-Image.png) no-repeat center center;
background-size: cover;
width: 500px;
height: 200px;
left: 50%;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="horizontal">
</div>
</div>

Simply add the start position to current scrollTop
Edited to include speed
$(document).ready(function () {
var $horizontal = $('.horizontal');
var startPosition = $horizontal.position().left;
var speed = 14;
$(window).scroll(function () {
var st = $(this).scrollTop();
var newPos = (st * (speed/100)) + startPosition;
$horizontal.css({
'left': newPos
});
});
});
.container {
min-height: 50000px;
width: 100%;
overflow: hidden;
}
.horizontal {
position: fixed;
width: 50px;
background: url(http://www.pngpix.com/wp-content/uploads/2016/06/PNGPIX-COM-Renault-Megane-RS-Trophy-White-Car-PNG-Image.png) no-repeat center center;
background-size: cover;
width: 500px;
height: 200px;
left: 50%;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="horizontal">
</div>
</div>

Filling window Background

I'm trying to put a picture on my background and my idea is that image fills the entire window, no matter what size it is.
I'm using html, css and script below:
// Funcao adaptImage()
// Parametros: targetimg
function adaptImage(targetimg) {
var wheight = $(window).height();
var wwidth = $(window).width();
targetimg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" });
var imgwidth = targetimg.width();
var imgheight = targetimg.height();
var destwidth = wwidth;
var destheight = wheight;
if(imgheight < wheight) {
destwidth = (imgwidth * wheight)/imgheight;
$('#fundo img').height(destheight);
$('#fundo img').width(destwidth);
}
destheight = $('#fundo img').height();
var posy = (destheight/2 - wheight/2);
var posx = (destwidth/2 - wwidth/2);
if(posy > 0) {
posy *= -1;
}
if(posx > 0) {
posx *= -1;
}
$('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}
$(window).resize(function() {
adaptImage($('#fundo img'));
});
$(window).load(function() {
$(window).resize();
});
#fundo-externo {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#fundo {
position: fixed;
width: 100%;
height: 100%;
}
#fundo img {
width: 100%;
position: absolute;
}
#site {
position: absolute;
top: 40px;
left: 50%;
width: 560px;
padding: 20px;
margin-left: -300px;
background: #FFF;
background: rgba(255,255,255,0.8);
}
<body>
<div id="fundo-externo">
<div id="fundo">
<img src="http://placehold.it/1920x1080" alt="" />
</div>
</div>
</body>
My problem is in some devices, the background does not fill completely , it appears a white list below.
Any ideas would help Many thanks

Use this setting for your background image
.for_background_img {
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}

don't use an <img> tag, but use the image as background image for your body:
body {
background: url('http://placehold.it/1920x1080') no-repeat;
background-position: fixed;
background-size:cover;
}