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

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

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>