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

Question

我试图做一个导航栏，滚动时消失，动画效果很好。 这是我到目前为止所做的。

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：

    /* ===================   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：

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

在这里检查这个小提琴

如果要隐藏带有某些动画的滚动条，请固定其位置，然后将其隐藏在滚动条上。 （需要为此演示添加Jquery）

喜欢， 示例HTML

<header>Header</header>

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

样本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