用户向上/向下滚动时如何隐藏/显示导航栏答案

【问题标题】：How to hide/show nav bar when user scrolls up/down用户向上/向下滚动时如何隐藏/显示导航栏
【发布时间】：2020-04-09 04:14:01
【问题描述】：

当用户向上/向下滚动时隐藏/显示导航栏

这是我想要实现的示例： http://haraldurthorleifsson.com/ 或者 http://www.teehanlax.com/story/readability/

当您向下滚动时，导航栏会向上滑出屏幕，而当您向上滚动时，导航栏会滑回屏幕。我已经想出了如何使用淡入/淡出来做到这一点，但我想用与示例中完全相同的动画来实现它。 注意：我已经尝试过 SlideIn() 并且喜欢它执行拉伸动画的方式...

JQUERY：

var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;

$('#header-wrap').height($('#header').height());

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').fadeOut();
        } else {
            $('#header').fadeIn();
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});

CSS：

#header {
    width: 100%;
    z-index: 100;
}

.fixed {
    position: fixed;
    top: 0;
}

#header-wrap {
    position: relative;
}

HTML：

    <div id="header-wrap">
    <div id="header" class="clear">
        <nav>
            <h1>Prototype</h1>
        </nav>
    </div>
</div>

【问题讨论】：

我遇到了同样的问题，也许我的问题对你有帮助。 [固定头 JQuery][1][1]:stackoverflow.com/questions/17532872/…
我写了一个小部件来解决这个确切的问题。完全可定制，从显示/隐藏之前的容差（例如，必须滚动 > 5px）到触发之前的偏移量（例如，必须从顶部 > 200px）。你可能想看看wicky.nillia.ms/headroom.js

标签： javascript jquery css html

【解决方案1】：

要让nav的内部内容向上滑动而不是逐渐隐藏，你需要在父元素上做动画，并将内部元素保持在父元素的底部，如下所示：

jsfiddle

<div id="header-wrap">
    <div id="header" class="clear">
        <nav><h1>Prototype</h1>another line<br/>another line
        </nav>
    </div>
</div>

css

body {
    height: 1000px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #e0e0e0;
}

js

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } else {
            $('#header-wrap').slideDown();
    }
    previousScroll = currentScroll;
});

【讨论】：

【解决方案2】：

你试过动画吗？但将-60px 替换为导航栏的高度。但是否定的。

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').animate({
                 top: '-60px'      //Change to Height of navbar
            }, 250);               //Mess with animate time
        } else {
            $('#header').animate({
                 top: '0px'
            },250);
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});

【讨论】：

【解决方案3】：

无论您使用什么navbar 元素，它都必须包含一个transition: transform 0.3s，并且基础transform 为0。

#navbar {
    position: fixed;
    right: 0; left: 0; top: 0; 
    /* your height */
    height: 40px;
    /* .... */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
}
#navbar.scrolled {
    /* subtract your height */
    -webkit-transform: translate3d(0,-40px,0);
    -moz-transform: translate3d(0,-40px,0);
    transform: translate3d(0,-40px,0);
}

那么你的javascript需要观察用户的滚动：

;(function (){
    var previousScroll = 0;
    var navbar = document.getElementById('navbar'),
        navClasses = navbar.classList; // classList doesn't work <IE10

    window.addEventListener('scroll', function(e){
       var currentScroll = window.scrollY;
       var isDown = currentScroll > previousScroll;

       if ( isDown && !navClasses.contains('scrolled') ){
          // scrolling down, didn't add class yet
          navClasses.add('scrolled'); // we hide the navbar
       } else if ( !isDown ){
          // scrolling up
          navClasses.remove('scrolled'); // won't error if no class found
       }

       // always update position
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

【讨论】：

【解决方案4】：

试试净空js。

您还可以编辑 CSS 类并部署过渡效果。

http://wicky.nillia.ms/headroom.js

【讨论】：

【解决方案5】：

css

@media(min-width: 1079px){
    #header{
        width:100%;
        height:82px;
        border:1px solid grey;
        background-color: lightgreen;
        margin:0 auto;
        position:fixed;
        transition-property: all;
        transition-duration: 0.3s;
        transition-delay: 0s;
        transition-timing-function: ease-out;
    }
    nav{
        display: flex;
        justify-content: space-between;
    }
    nav .nav1{
        list-style-type: none;
        padding: 0px;
    }
    nav a{
        text-decoration: none;
        color:grey;
        padding: 13px;
        display: block;
        color: grey;
        margin-top: 15px;
    }
    a{
        text-decoration: none !important;
    }
    nav a:hover{
        color: red;
    }
    nav .nav1{
        display: flex;
        justify-content: flex-end;
    }
    .row2{
        background-color: skyblue;
        height:2000px;
        margin-top: 82px;
    }
}

html

<!DOCTYPE html>
<html>
<head>

    <title>header2</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet"  href="css/header-larger1.css">
</head>
<body>
    <!--<div id="header">-->
        <nav>
            <ul class="nav1" id="header">
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">INFO</a></li>
                <li><a href="">DISCOUNTS</a></li>
                <li><a href="">BUSINESS</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </nav>
    <!--</div>-->
    <div class="container row2">
        <h3>this is row2</h3>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/head1.js"></script>
</html>

js

function fun1()
{
     var documentElem=$(document),

     lastScrollTop=0;
     scrollabc=80;

     documentElem.on('scroll',function()
     {
        var currentScrollTop=$(this).scrollTop();
        console.log(window.pageYOffset);
        if(currentScrollTop > scrollabc)
        {
            if(currentScrollTop>lastScrollTop)
            {
           //nav.addClass('hidden'); 
            document.getElementById("header").style.marginTop = "-80px";
            console.log("first if block");
            }
        else
        {
          // nav.removeClass('hidden'); 
           document.getElementById("header").style.marginTop = "0px";
           console.log("2nd if block");
        } 
    }
        lastScrollTop=currentScrollTop;
    })
}



fun1();

【讨论】：

请解释您的代码行，以便其他用户了解其功能
它应该在向下滚动时消失并在再次向上滚动时显示出来。您的代码似乎是粘性导航栏的说明。

【解决方案6】：

我发现了Saijo George 所写的@Dom Day 的类似且更简单的实现。

注意：我重命名了 Saijo 的变量，以便于阅读。

CSS

/* This class will be attached to your nav by the below */
.scrollUp {
  transform: translateY(-100%);
}

jQuery

const navbar = document.querySelector("nav"); //Select your nav element here
let previousScroll = 0;

$(window).scroll(function handleNav() {
  let currentScroll = $(window).scrollTop(); //Distance scrolled down the page
  let navHeight = $(navbar).height(); //Height of navbar

  //When scrolling down AND you've scrolled past navHeight * 2.25, add .scrollUp
  if (currentScroll > previousScroll && currentScroll > navHeight * 2.25) {
    $(navbar).addClass("scrollUp");
    //When scrolling up AND you've scrolled less than navHeight, remove .scrollUp
  } else if (previousScroll > currentScroll && !(currentScroll <= navHeight)) {
    $(navbar).removeClass("scrollUp");
  }
  previousScroll = currentScroll;
});

【讨论】：