仿简书、慕课专栏头部导航栏滚动特效

来源：互联网收集：自由互联发布时间：2023-10-08

不知大家有没有看过简书的导航栏随上下滚动所展现出来的切换内容的效果，和在慕课专栏看到的头部导航栏随上下滚动而隐藏/展现的特效，就一直念念不忘。趁今晚无事，不如来把

不知大家有没有看过简书的导航栏随上下滚动所展现出来的切换内容的效果，和在慕课专栏看到的头部导航栏随上下滚动而隐藏/展现的特效，就一直念念不忘。
趁今晚无事，不如来把两种效果都实现一下，以此慰藉自己这几天“受伤的心灵”。。。

先来看下两种效果（第二种不好截图，见谅）：

仿简书、慕课专栏头部导航栏滚动特效_html

和

仿简书、慕课专栏头部导航栏滚动特效_css3_02

OK，话不多说，咱们上代码：
先来看简书的特效制作：
笔者以为，头部导航栏的“大框架”固定位置、宽高，然后在其子元素设置两个不同内容的“导航栏”，随着滚动，去判断是向上还是向下，根据不同情况为两个“子导航栏”增加或者删除“类”！（通过类名的设置，这样做效率上相对高一些）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 导航栏框架样式 */
        .navigation{
            width: 100%;
            height: 50px;
            background-color: #d0f079;
            position: fixed;         
            left:0;
            top: 0;
            text-align: center;
            overflow: hidden;
            z-index: 9999;
        }
        .navigation .navigation1,.navigation2{
            width: 100%;
            height: 50px;
            margin-bottom: 10px;
            transition: transform .5s;
        }
        .navigation1{
            position: absolute;
            top: 0;
        }
        .navigation2{
            position: absolute;
            top: 60px;
        }
        /* 隐藏效果 */
        .hide{
            transform: translateY(-60px);
        }
        /* 内容栏样式 */
        .content{
            width: 80%;
            height: 500px;
            margin: 60px auto;
            background-color: #41bcff;
            text-align: center;
            line-height: 100px;
        }
 
    </style>
</head>
<body>
<div class="navigation">
    <div class="navigation1">导航菜单栏1</div>
    <div class="navigation2">导航菜单栏2</div>
</div>
<div class="content">内容</div>
<script src="./js/jquery.min.js"></script>
<script>
    $(function(){
        //页面初始化的时候，获取滚动条的高度（上次高度）
        var start_height = $(document).scrollTop();
        //获取导航栏的高度(包含 padding 和 border)
        var navigation_height = $('.navigation1').outerHeight();
        $(window).scroll(function() {
            //触发滚动事件后，滚动条的高度（本次高度）
            var end_height = $(document).scrollTop();
            //触发后的高度 与 元素的高度对比
            if (end_height > navigation_height){
                $('.navigation1').addClass('hide');
                $('.navigation2').addClass('hide');
            }else {
                $('.navigation1').removeClass('hide');
                $('.navigation2').removeClass('hide');
            }
            //触发后的高度 与 上次触发后的高度 比较
            if (end_height < start_height){
                $('.navigation1').removeClass('hide');
                $('.navigation2').removeClass('hide');
            }
            //再次获取滚动条的高度，用于下次触发事件后的对比
            start_height = $(document).scrollTop();
        });
    });
</script>
</body>
</html>

再来看下慕课的样式是怎样做的：
大体上和上面一样，但是它只有一个“导航栏”，也是随着滚动，去判断是向上还是向下，根据不同情况为“导航栏”增加或者删除“类”！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 导航栏样式 */
        .navigation{
            width: 100%;
            height: 50px;
            background-color: #d0f079;
            position: fixed;         
            left:0;
            top: 0;
            text-align: center;
            transition: top 0.5s;    
        }
        /* 隐藏效果 */
        .hide{
            top: -60px;
        }
        /* 内容栏样式 */
        .content{
            width: 80%;
            height: 5000px;
            margin: 60px auto;
            background-color: #41bcff;
            text-align: center;
            line-height: 500px;
        }
 
    </style>
</head>
<body>
<div class="navigation">导航菜单栏</div>
<div class="content">内容</div>
<script src="./js/jquery.min.js"></script>
<script>
    $(function(){
        //页面初始化的时候，获取滚动条的高度（上次高度）
        var start_height = $(document).scrollTop();
        //获取导航栏的高度(包含 padding 和 border)
        var navigation_height = $('.navigation').outerHeight();
        $(window).scroll(function() {
            //触发滚动事件后，滚动条的高度（本次高度）
            var end_height = $(document).scrollTop();
            //触发后的高度 与 元素的高度对比
            if (end_height > navigation_height){
                $('.navigation').addClass('hide');
            }else {
                $('.navigation').removeClass('hide');
            }
            //触发后的高度 与 上次触发后的高度
            if (end_height < start_height){
                $('.navigation').removeClass('hide');
            }
            //再次获取滚动条的高度，用于下次触发事件后的对比
            start_height = $(document).scrollTop();
        });
    });
</script>
</body>
</html>

注意两者的区别：第一个因为要切换不同内容，所以其动画特效对应于“transform”；而第二个直接操纵显示/隐藏，故而其对应的是“top”。
（若是第一个也用了top，那岂不是一往上滚动，两个就都往上面隐藏掉了。。。）

上一篇：ZCMU—1891
下一篇：没有了

仿简书、慕课专栏头部导航栏滚动特效

相关文章