动画导航栏

Question

我想知道如何在向下滚动时使导航栏具有动画效果。我知道的一个例子是 FlatIcon。我只需要知道如何让网站识别用户何时向下滚动。我可以自己制作动画

Answer 1

假设您想在用户滚动超过 90 像素后更改菜单高度

JAVA 脚本代码

//ONSCROLL FUNCTION TO HIDE MENU
function hideMenu(){
    var mouseX = window.scrollY;
    var menu = document.getElementById("pageHeader");
    if(mouseX > 90){
        menu.style.height = "50px";
        menu.style.transition = "height 1s"; /*This is Optional */
    }else {
        menu.style.height = "100PX";
        menu.style.transition = "height 1s";
    }
}
window.addEventListener("scroll",hideMenu);

CSS 代码。简单易懂

<style>
#pageHeader {
height: 100px;
}
</style>

HTML 代码

<div id="pageHeader">
<!-- HERE IS YOUR MENU ITEMS OR THEIR CONTAINER... -->
</div>

在此代码中，此函数 hideMenu() 始终在用户向下滚动您的页面时启动。当他们向下滚动超过 90 像素时，您的菜单高度为 50 像素。您可以使用 if else 条件添加更多效果... 希望这会帮助你。如果您有进一步的问题评论他们..

Answer 2

您可以启动 jquery 函数并启用 class，通过 CSS 放置 position:fixed。 Live Example

HTML

<div id="nav-bar"></div>
<div id="some-content"></div>
<div id="anchor-point"></div>
<div id="sticky"></div>
<div id="some-content2"></div>

CSS

#nav-bar{
   margin-top: 0;
   background-color: #000;
   height:60px;
   position: fixed;
   top: 0;
   z-index: 1;
   width:100%
}
#some-content{
   height: 500px;
}
#sticky{
   width:100%;
   height:50px;
   background-color:#ccc;
}

#sticky.stick {
    margin-top: 60px !important;
    position: fixed;
    top: 0;
    z-index: 2000;
}
#some-content2{
   height: 500px;
}

JQuery/JS

function stick_sticky() {
    var window_top = $(window).scrollTop();
    var div_top = $('#anchor-point').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#anchor-point').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
 }

 $(function() {
     $(window).scroll(stick_sticky);
     stick_sticky();
 });

动画导航栏

Animated navigation bar

html

css

jquery

animation

navbar