如何制作一个导航栏，当您滚动时会消失(带有漂亮的动画）

How to make a navigation bar which disappears (with a nice animation) when you scroll

本文关键字：消失 漂亮 滚动 动画 何制作 一个 导航      更新时间：2023-09-26

我正在尝试做一个导航栏，滚动时会消失，并带有漂亮的动画。这是我到目前为止所做的。

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

在这里检查这个小提琴

如果要在滚动时隐藏

带有一些动画的导航栏，请固定其位置并在滚动时将其隐藏。（需要为这个演示添加Jquery）

喜欢示例网页

<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");
    }
});
相关文章：