Я хочу, чтобы моя навигационная панель исчезла при прокрутке вниз и появлялась при прокрутке вверх. Навигационная панель исправлена. Что случилось? - PullRequest
Новая
       168

Я хочу, чтобы моя навигационная панель исчезла при прокрутке вниз и появлялась при прокрутке вверх. Навигационная панель исправлена. Что случилось?

0 голосов
/ 14 июля 2020 
var nav_offset_top = $('.header_area').height()+50;
function navbarFixed(){
    if ( $('.header_area').length )
    {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            if (scroll >= nav_offset_top ) {
                $(".header_area").addClass("navbar_fixed");
            } else {
                $(".header_area").removeClass("navbar_fixed");
            }
        });
    };
};
navbarFixed();

Как это исправить? когда я прокручиваю, панель навигации фактически фиксируется в той же позиции, а не скрывается.

1 Ответ

0 голосов
/ 14 июля 2020

Замените тег h1 своей навигационной панелью и установите id для своей навигационной панели, а также добавьте css 

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

function myFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.getElementById("m-id").className = "test";
  } else {
    document.getElementById("m-id").className = "";
  }
}
body{
height:1500px;
}
.test {
  background-color: yellow;
  display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>nav-disappear</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id="m-id" style="position:fixed">This will be your Navbar</h1>
<p>scroll down to see magic in navbar</p>
</body>
</html>
...