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

要使导航的内部内容向上滑动，而不是逐渐隐藏，您需要在父元素上进行动画，并将内部元素保持在父元素的底部，如下所示：

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

你尝试过动画制作吗？但是将CCD_ 1替换为导航条的高度。但是消极的。

$(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;
});

无论使用什么navbar元素，它都必须包含一个transition: transform 0.3s和一个0的基transform。

#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

尝试headroom js。

您还可以编辑CSS类并部署转换效果。

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

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();

我发现了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;
});