Я не знаю, почему (position: fixed) не работает с классом загрузчика, во-первых, я записал свойство flow в разделы и удалил его, и оно все еще не работает !!
HTML: -
<body>
<div class="wrapper">
<section class="loader">
<div class="loading"></div>
</section>
<article>
<h1>This is the article's name</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, voluptatem quibusdam minima totam sequi dicta impedit reiciendis nihil magnam molestias ut, facere officia asperiores amet quo vel, at. Minima, ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, voluptatem quibusdam minima totam sequi dicta impedit reiciendis nihil magnam molestias ut, facere officia asperiores amet quo vel, at. Minima, ex.
</p>
</article>
</div>
SASS
перспектива тела: 500px цвет фона: $backgroundColor
.wrapper
height: 5000px
.loader
position: fixed
top: 0
right: 50px
width: 4px
border-radius: 2px
border: 1px solid #999
.loading
position: absolute
top: 0
left: 0
width: 100%
height: 0
border-radius: 4px
background-color: #000
article
margin: 50px 100px 50px 50px
p
margin: 10px 20px
JavaScript: -
$(document).ready(function(){
var wrapperHeight = $('.wrapper').height();
var windowHeight = $(window).height();
var loader = document.getElementsByClassName('loader');
$(loader[0]).css('height', ''+ (windowHeight - 100) +'px');
var loaderHeight = $('.loader').height();
var loadingValue = (loaderHeight / wrapperHeight);
$(window).scroll(function(){
var scroll = $(window).scrollTop();
$('.loading').css('height', ''+ (scroll * loadingValue) +'px');
});
});