当前位置首页建站

导航菜单下拉隐藏上拉显示源码及案例

导航菜单的特效,当用户向下拉动滚动条时菜单隐藏,上拉滚动条时菜单显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script>
        $(function(){
            var start_height = $(document).scrollTop();
            var navigation_height = $('.header').outerHeight();
            $(window).scroll(function() {
                var end_height = $(document).scrollTop();
                if (end_height > navigation_height){
                    $('.header').addClass('slideUp');
                }else {
                    $('.header').removeClass('slideUp');
                }
                if (end_height < start_height){
                    $('.header').removeClass('slideUp');
                    }
            start_height = $(document).scrollTop();
            });
        });
    </script>
    <style>
        .header{position:fixed;top:0;left:0;right:0;z-index:100;height:80px;background:#0df;background:linear-gradient(90deg,#d0f,#0df);-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.1);box-shadow:0 0 3px 1px rgba(0,0,0,.1);-webkit-transition: all .4s; transition: all .4s;}
        .header.slideUp{top:-80px;}
        #main{height:2000px;background: #ddd;}
        #footer{background: #222;}
    </style>
    <title>导航菜单下拉隐藏上拉显示</title>
</head>
<body>
    <div class="header">header</div>
    <div id="main">Main</div>
    <div id="footer">footer</div>
</body>
</html>


声明:除非注明,否则均为淘折网原创文章,转载或复制请以超链接形式并注明出处。如果您觉得本文对您有所帮助的话,可以在下方点赞或者打赏哦(*^_^*)
分享到:
阿里云服务器优惠券

发表评论

请文明发言