首页 > 其他 > 详细

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

时间:2018-07-02 10:05:38      阅读:228      评论:0      收藏:0      [点我收藏+]
 为了项目的制作,需要一个导航栏置顶的效果,遇到了点难度,但还是克服了,通过比较导航和滚动条的高度实现置顶效果
<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>

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

原文:https://www.cnblogs.com/amberoid/p/9252161.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!