头部导航下拉跟随的效果实例CSS教程

小秋同学 11-15 11:25:32 学习园地
摘要: 大家好 ,做网站的时候我们总是遇见想,导航下拉的时候能够跟随的底部或者某个位置不变一直显示,今天小秋就举个例子来说说吧!JS部分<script> document.addEventListener("scroll",f摘要: 大家好 ,做网站的时候我们总是遇见想,导航下拉的时候能够跟随的底部或者某个位置不变一直显示,今天小秋就举个例子来说说吧!JS部分<script> document.addEventListener("scroll",f

大家好 ,做网站的时候我们总是遇见想,导航下拉的时候能够跟随的底部或者某个位置不变一直显示,今天小秋就举个例子来说说吧!


JS部分(此段上下啦不隐藏)


<script>

document.addEventListener("scroll",function(){

            var downSearch = document.querySelector(".bg-blue");

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

            if(scrollTop >= 680){

                downSearch.classList.add("search-fixs")

            }else if(scrollTop <= 680){

                downSearch.classList.remove("search-fixs")

            }

            console.log(scrollTop);

        })

</script>

或者:(以下是上啦隐藏)

<script>

    $(function(){

        //页面初始化的时候,获取滚动条的高度(上次高度)

        var start_height = $(document).scrollTop();

        //获取导航栏的高度(包含 padding 和 border)

        var navigation_height = $('.bg-blue').outerHeight();

        $(window).scroll(function() {

            //触发滚动事件后,滚动条的高度(本次高度)

            var end_height = $(document).scrollTop();

            //触发后的高度 与 元素的高度对比

            if (end_height > navigation_height){

                $('.bg-blue').addClass('search-fixs');

            }else {

                $('.bg-blue').removeClass('search-fixs');

            }

            //触发后的高度 与 上次触发后的高度

            if (end_height < start_height){

                $('.bg-blue').removeClass('search-fixs');

            }

            //再次获取滚动条的高度,用于下次触发事件后的对比

            start_height = $(document).scrollTop();

        });

    });

</script>

红色字表示 :触发的JS开始标记

蓝色字表示:CSS样式


htm部分


<div  class="bg-blue"  style="display:none;">把你的 导航代码内容放在这里</div>



CSS样式

<style>

.search-fixs {

           display: block!important;

            position: fixed;

            left: 0;

            top: 0;

    height: 145px;

            width: 100%;

            border-bottom: 2px solid #f10214;

            background-color: #ffffff;

            -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            -webkit-animation: searchTop .3s ease-in-out;

            animation: searchTop .3s ease-in-out

z-index:99999999999999;

        }


    


  


        @-webkit-keyframes searchTop {

            0% {

                top: -50px

            }


            to {

                top: 0

            }

        }


        @keyframes searchTop {

            0% {

                top: -50px

            }


            to {

                top: 0

            }

        }

</style>


头部导航下拉跟随的效果实例CSS教程(图1)

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/854.html发布于 11-15 11:25:32
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~