滚动时如何制作消失的导航栏（带有漂亮的动画）

Question

I am trying to do a navigation bar which disappears when scrolling, with a nice animation. 我试图做一个导航栏，滚动时消失，动画效果很好。 Here is what i made so far. 这是我到目前为止所做的。

HTML: HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="icon" href="favicon.PNG" type="image/gif">
        <title>Top News</title> 
    </head>
    <body>
        <div class = "fixedbc">
            <div class="bwbutton">Welcome to Top News</div>
            <header>asdasd</header>
        </div>
    </body>
</html>

CSS: CSS：

    /* ===================   Needs   =================== */
html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
      border:0px;
    }

/* ===================   Buttons   =================== */

.bwbutton {
    background-color:transparent;
    border:6px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Georgia;
    font-size:45px;
    padding:13px 60px;
    text-decoration:none;
    position:absolute;
    top:30%;
    left:29%;
    transition: all .1s ease-in;
}
.bwbutton:hover {
    background-color:transparent;
    border:6px solid black;
    color:black;
    transition: all 0.2s ease-in;
}
.bwbutton:active {

}

/* ===================   LAYOUT   =================== */

.fixedbc {
    min-height:100%;
    background-image: url("../bc.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
marquee{
    text-decoration: none;
    margin-top:1.5%;
    color:white;
}

/* ===================   Header // Nav   =================== */

header {
  background: #f5b335;
  height: 40px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}
// we'll add this class using javascript
.nav-up {
  top: -40px; // same as header height. use variables in LESS/SASS
}

Javascript: Javascript：

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}

function hasScrolled() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    if (st > lastScrollTop && st > navbarHeight){
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

Answer 1

Check this fiddle here 在这里检查这个小提琴

If you wanted to hide navigation bar on scroll with some animation, then make its position fixed and hide it on scroll. 如果要隐藏带有某些动画的滚动条，请固定其位置，然后将其隐藏在滚动条上。 (Need to add Jquery for this demo) （需要为此演示添加Jquery）

Like, Sample HTML 喜欢， 示例HTML

<header>Header</header>

Sample CSS CSS样本

body {
    margin: 0;
    padding: 0;
    height: 1000px
}

header {
    position:fixed;
    background: #111111;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height:50px;
    color:#FFFFFF;
    -webkit-transition: all 0.35s;
       -moz-transition: all 0.35s;
            transition: all 0.35s;
    overflow: hidden
}

header.hide {
    margin-top: -50px;
}

Sample Jquery 样本jQuery

$(window).scroll(function() {
    if ($("header").offset().top > 50) {
        $("header").addClass("hide");
    } 
    else {
        $("header").removeClass("hide");
    }
});

滚动时如何制作消失的导航栏（带有漂亮的动画）

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-07-12 16:34:56

滚动时如何制作消失的导航栏（带有漂亮的动画）

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-12 16:34:56

解决方案1
2 已采纳 2016-07-12 16:34:56