Question

我很想知道当你向下滚动导航栏时，如何制作导航栏。我知道的一个例子是FlatIcon。我只需要知道如何让网站在人们向下滚动时识别出来。我可以自己制作动画

Answer 1

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

JAVA SCRIPT CODE

//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 CODE

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

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

Answer 2

您可以触发jquery函数并启用通过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();
 });

动画导航栏

2 个答案: