Question

我在页面的一部分使用粘性菜单，这样当用户滚动到它时，它会粘在顶部。当用户向上滚动时，当您到达页面上粘性菜单的位置时，它将停止粘贴到顶部。

一切正常。唯一的问题是，如果有人在粘性菜单位于顶部时刷新页面，当您在页面上传递它时它不会松开（无论您身在何处，它都会卡住）。

我有什么办法可以删除吗？

var menu = document.querySelector('.menu-t')
        var menuPosition = menu.getBoundingClientRect().top;
        window.addEventListener('scroll', function () {
            if (window.pageYOffset >= menuPosition) {
                menu.style.position = 'fixed';
                menu.style.top = '0px';
            } else {
                menu.style.position = 'static';
                menu.style.top = '';
            }
        });

.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

.page-section.page-section-center {
  align-content: center;
  text-align: center;
}


.menu-t {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px #eee dotted;
}
.menu-t li {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.menu-t a {
  display: block;
  padding: 10px 0;
  color: #32404E !important;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.menu-t a:hover {
  color: #2db2e9 !important;
}

<section class="page-section">
  <br/>
  <br/>
    <br/>
  <br/>
  </section>
<section class="page-section page-section-center hidden-xs hidden-sm">
    <ul class="menu-t">
      <li>ITEM</li>
        <li>
            <a href="#" class="text-thick">What Is</a>
        </li>
        <li>
        <a href="#" class="text-thick">How</a>
        </li>
        <li>
            <a href="#" class="text-thick">You're In Good Company</a>
        </li>
      <li>ITEM</li>
    </ul>
</section>
  <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/>

Answer 1

将DOMContentLoaded eventListener添加到您的javascript。

document.addEventListener("DOMContentLoaded", function(event) {
  var menu = document.querySelector('.menu-t')
  var menuPosition = menu.getBoundingClientRect().top;
  window.addEventListener('scroll', function () {
      if (window.pageYOffset >= menuPosition) {
          menu.style.position = 'fixed';
          menu.style.top = '0px';
      }
      else {
          menu.style.position = 'static';
           menu.style.top = '';
        }
    });
});

粘滞菜单 - 阻止加载页面刷新

1 个答案: