スティッキーメニュー - ページリフレッシュ時の読み込みを防止する

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

あなたのJavaScriptにDOMContentLoadedのEventListenerを追加します。

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 = ''; 
     } 
    }); 
});