zoukankan      html  css  js  c++  java
  • 实现滚轮监听,导航栏置顶的效果。

     为了项目的制作,需要一个导航栏置顶的效果,遇到了点难度,但还是克服了,通过比较导航和滚动条的高度实现置顶效果
    <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>
  • 相关阅读:
    ExtJs自学教程(1):一切从API開始
    c++多态的案例分析
    pig中使用的一些实例语法
    6.跑步者--并行编程框架 ForkJoin
    移动加密那点事儿_值存储加密
    手工制作的年份Java老A发售量
    【C语言的日常实践(十六)】字符串输出功能puts、fputs和printf
    POJ 1852 Ants
    HDU 4793 2013 Changsha Regional Collision[简单的平面几何]
    BZOJ 1355 Baltic2009 Radio Transmission KMP算法
  • 原文地址:https://www.cnblogs.com/amberoid/p/9252161.html
Copyright © 2011-2022 走看看