div, 导航栏, 菜单栏滚动置顶, 随滚动条浮动定位, 悬浮固定

发布时间:2020-12-05 06:36 作者:独孤剑 阅读:152

div, 导航栏, 菜单栏滚动置顶, 随滚动条浮动定位, 悬浮固定

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 获取要定位元素距离浏览器顶部的距离
            var fixed = $('.nav').offset().top;
            // 滚动条事件
            $(window).scroll(function(){
            // 获取滚动条的滑动距离
            var scrollTop = $(this).scrollTop();
                // 滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
                if(scrollTop>=fixed){
                    $('.nav').css({'position':'fixed','top':0});
                }else if(scrollTop<fixed){
                    $('.nav').css({'position':'static'});
                }
            })
        })
    </script>
    <title></title>
</head>
<body>
    <div style="height:200px;">
        这里是内容区
    </div>
    <!--注意 .nav 的宽度,否则在悬浮的时候宽度扩充到100%-->
    <div class="nav" style="width:1000px;border:1px solid #ff0000">
        这里是菜单栏
    </div>
    <div style="height:1000px;">
        这里是内容区
    </div>
</body>
</html>


作者最新文章
做好网站维护需要具备哪些知识? 网站维护都需要做哪些内容?
C# Console 控制台禁止重复打开, 只能运行一个实例, 禁止多开
C# 正则获取网页内容, 抓取html源代码里的 title
C# 通过循环的方式遍历数组中不相同的元素
css 设置背景色的两种方式, 如何设置背景颜色?