альтернатива "onScroll" для скрытия navbar? - PullRequest
Новая
       95

альтернатива "onScroll" для скрытия navbar?

0 голосов
/ 26 апреля 2020

будучи новичком в скриптинге, я прошу помочь с этой проблемой: я хочу, чтобы моя панель навигации (# header-menu) была скрыта при загрузке моей домашней страницы. Немного прокрутив вниз (500 пикселей), я хочу, чтобы это было показано. Скрипт работает, за исключением того, что навигационная панель отображается при переходе на домашнюю страницу. Он исчезает при прокрутке вниз, а затем появляется снова, как и должно. Но проблема в том, что он не скрывается по умолчанию при переходе на домашнюю страницу (например, при нажатии на lo go). 

<header>
    <div id="header-content">
        <a href="index.php#toppage"><img src="images/Logo.png" alt="" style="float:left"></a>
        <a href="index.php#toppage"><img src="images/Logo2.png" alt="" style="float:right"></a>
    </div>

    <ul id="header-menu" class="grid-4">
        <li><a href="#menu-item-1" class="page-scroll menu-item-blue">menu-item-1</a></li>
        <li><a href="#menu-item-2" class="page-scroll menu-item-blue">menu-item-2</a></li>
        <li><a href="#menu-item-3" class="page-scroll menu-item-blue">menu-item-3</a></li>
        <li><a href="#menu-item-4" class="page-scroll menu-item-blue">menu-item-4</a></li>
</ul>
</header>

<script>
window.onscroll = function() {hidemenu()};
function hidemenu() {
var element = document.getElementById("header-menu");
  if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
    element.classList.remove("hidden");
  } else {
    element.classList.add("hidden");
  }
}
</script>

Наверное, на самом деле я ищу альтернативу «onscroll». Я не хочу запускать скрытие / отображение моей панели навигации, когда пользователь прокручивает, я хочу, чтобы она скрывалась / отображалась в зависимости от позиции. Также панель навигации должна отображаться, когда пользователь находится на других страницах. Это скрытие / показ относится только к домашней странице. Заранее спасибо.

1 Ответ

0 голосов
/ 26 апреля 2020 
<script>
    var element = document.getElementById("header-menu");
    window.addEventListener("load",()=>{
        element.classList.add("hidden");
    })
    window.onscroll = function() {hidemenu()};
    function hidemenu() {
      if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        element.classList.remove("hidden");
      } else {
        element.classList.add("hidden");
      }
    }
</script>

Это то, как вы можете скрыть при загрузке страницы (или), если вы хотите скрыть на домашней странице и увидеть в других, вы можете использовать 

<body onload="hide-nav()">
....
</body> 

 <script>
var element = document.getElementById("header-menu");
        hide-nav=()=>{
        element.classList.add("hidden");
   }
        window.onscroll = function() {hidemenu()};
        function hidemenu() {
          if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
            element.classList.remove("hidden");
          } else {
            element.classList.add("hidden");
          }
        }
    </script>
...