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

 为了项目的制作,需要一个导航栏置顶的效果,遇到了点难度,但还是克服了,通过比较导航和滚动条的高度实现置顶效果
<div id="daohang" style="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>
原文地址:https://www.cnblogs.com/amberoid/p/9252161.html