заливка хеадера в зависимости от скролла страницы

Question

вопрос не актуален, получилось сделать вот скрипт для локомотива

    scroll.on('scroll', (args) => {
      var scrollY = Math.round(args["scroll"]["y"]);
      var scrollH = Math.round(args["limit"]["y"]);
      let scrollheader = Math.round((scrollY / scrollH) * 100);
      console.log(scrollY);
      console.log(scrollH);
      console.log(scrollheader + '%');
    });

можно ли залить полоской хеадер, при прокручивании страницы вверх или вниз? еще я использую локомотив скролл. на обычном получилось сделать, а вот на локомотив нет

    window.onscroll = function() {
    let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    let documentHeight = Math.max(
      document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight,
      document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight
    );
      let posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
      let scrollTop = Math.round((posTop / (documentHeight - windowHeight)) * 100);
      console.log('y=' + scrollTop);
    }

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    const scroll = new LocomotiveScroll({el: document.querySelector('[data-scroll-container]'),smooth: true, getSpeed: true,getDirection: true});
scroll.on('scroll', (args) => {
  var scrollY = args["scroll"]["y"];
  console.log(scrollY)
});

<main data-scroll-container="">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
 <link rel="stylesheet" href="https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.min.css">
  <script src="https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.min.js"></script>

БЛОГ НА HUSL

заливка хеадера в зависимости от скролла страницы

Ответы (0 шт):