当网站标题位置粘滞时，从页脚滚动到网站标题不起作用

Question

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("scrollBar").style.width = scrolled + "%";
}

var twentytwenty = twentytwenty || {};

// Set a default value for scrolled.
twentytwenty.scrolled = 0;

twentytwenty.smoothScroll = {

  init: function() {
    // Scroll to anchor
    this.scrollToAnchor();

    // Scroll to element
    this.scrollToElement();
  },

  // Scroll to anchor
  scrollToAnchor: function() {
    var anchorElements = document.querySelectorAll('a[href*="#"]');
    var anchorElementsList = Array.prototype.slice.call(anchorElements);
    anchorElementsList.filter(function(element) {
      if (element.href === '#' || element.href === '#0' || element.id === 'cancel-comment-reply-link' || element.classList.contains('do-not-scroll') || element.classList.contains('skip-link')) {
        return false;
      }
      return true;
    }).forEach(function(element) {
      element.addEventListener('click', function(event) {
        var target, scrollOffset, originalOffset, adminBar, scrollSpeed, additionalOffset;

        // On-page links
        if (window.location.hostname === event.target.hostname) {
          // Figure out element to scroll to
          target = window.location.hash !== '' && document.querySelector(window.location.hash);
          target = target ? target : event.target.hash !== '' && document.querySelector(event.target.hash);

          // Does a scroll target exist?
          if (target) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();

            // Get options
            additionalOffset = event.target.dataset.additionalOffset;
            scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;

            // Determine offset

            adminBar = document.querySelector('#wpadminbar');

            originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
            scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;

            if (adminBar && event.target.className === 'to-the-top') {
              scrollOffset = scrollOffset - adminBar.getBoundingClientRect().height;
            }

            twentytwentyScrollTo(scrollOffset, null, scrollSpeed);

            window.location.hash = event.target.hash.slice(1);
          }
        }
      });
    });
  },

  // Scroll to element
  scrollToElement: function() {
    var scrollToElement = document.querySelector('*[data-scroll-to]');

    if (scrollToElement) {
      scrollToElement.addEventListener('click', function(event) {
        var originalOffset, additionalOffset, scrollOffset, scrollSpeed,
          // Figure out element to scroll to
          target = event.target.dataset.twentytwentyScrollTo;

        // Make sure said element exists
        if (target) {
          event.preventDefault();

          // Get options
          additionalOffset = event.target.dataset.additionalOffset;
          scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;

          // Determine offset
          originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
          scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;

          twentytwentyScrollTo(scrollOffset, null, scrollSpeed);
        }
      });
    }
  }

};

@media only screen and(min - width: 960 px) {

    .site - header {
        position: sticky;
        top: 0;
        z - index: 9999;
      }

      .scroll - container {
        width: 100 % ;
        height: 8 px;
        background: #ccc;
        position: fixed;
        z - index: 1;
      }

      .scroll - indicator {
        height: 8 px;
        background: #04AA6D;
       width: 0%;
    }

    .to-the-top {
          color: # 6 d6d6d;
      }

    a.to - the - top > * {
        pointer - events: none;
      }

      .to - the - top - long {
        display: none;
      }
  }

  <
  header id = "site-header"
class = "site-header header-footer-group"
role = "banner" >
  <
  /header> <
  div class = "scroll-container" > < div class = "scroll-indicator"
id = "scrollBar" > < /div></div >

  <
  footer id = "site-footer"
role = "contentinfo"
class = "header-footer-group" >

  <
  div class = "section-inner" >

  <
  a class = "to-the-top"
href = "#site-header" >
  <
  span class = "to-the-top-long" >
  To the top < span class = "arrow"
aria - hidden = "true" > ↑ < /span>                     </span > <!-- .to-the-top-long -->
  <
  span class = "to-the-top-short" >
  Up < span class = "arrow"
aria - hidden = "true" > ↑ < /span>                     </span > <!-- .to-the-top-short -->
  <
  /a><!-- .to-the-top -->

  <
  /div><!-- .section-inner -->

  <
  /footer>

一旦我添加了位置：sticky;对 .site-header CSS 选择器的声明，页脚中的滚动到顶部链接停止工作。

我尝试了许多溢出建议，但无法正常工作。

我认为这与 js、位置粘性和滚动之间的冲突有关。

当我删除滚动指示器时工作正常。

Answer 1

从滚动指示器中删除 width: 0% 应该可以修复它

Your updated code

Answer 2

我通过将滚动条移动到站点标题容器之外的顶部来解决这个问题：

<div id="scroll-top"></div>

<header id="site-header" class="site-header header-footer-group" role ="banner">