实现滚轮监听，导航栏置顶的效果。

Posted 2020-11-21 amberoid

 为了项目的制作，需要一个导航栏置顶的效果，遇到了点难度，但还是克服了，通过比较导航和滚动条的高度实现置顶效果

<div id="daohang" style="width:100%;height: 80px; background: black; top: 0px; left: 0px;color: white;text-align: center;position: absolute;">123</div>

<script type="text/javascript">

            $(function(){

                //引入id标签;

               var navtive=$("#daohang");

                //设置导航标签为置顶;

                var offsetTop=navtive.offset().top;

                //定义一个监听高度;

                var scrollHeight=$(document).scrollTop;

                fn(navtive,offsetTop);

                //设置监听事件;

                $(window).scroll(function(){

                    fn(navtive,offsetTop);

                });

                //调用方法;

                function fn(navtive,offsetTop){

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

                    if(offsetTop>scrollHeight){

                        navtive.css("top",offsetTop);

                    }else{

                        navtive.css("top",scrollHeight);

                    }

                }

            });

        </script>