使用jQuery + CSS 实现固定在底部的漂浮导航条

最新推荐文章于 2022-10-23 00:27:33 发布

weixin_33817333

最新推荐文章于 2022-10-23 00:27:33 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/CasparLi/blog/359662

本文介绍了一种使用jQuery、CSS和HTML实现固定底部漂浮导航条的方法。当页面滚动到特定位置时显示导航条，反之则隐藏。适用于网站底部快速访问链接等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 禁止页面缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
    <title>jQuery+CSS+DIV固定底部的漂浮导航条</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script type="text/javascript">
        jQuery(function () {
            /*
             1.概述：绑定一个或多个事件的event handler function到选中的元素上。
             2.参数：.on( events [, selector] [, data], handler(eventObject) )
             event：一个或多个空格分隔的事件类型和可选的命名空间，如“click”或“keydown.myPlugin”。
             selector：过滤那些触发事件的被选中元素的后代元素（selector匹配的后代元素才能触发）。如果选择器是null或者被省略，则选中元素总能触发事件。
             data：当事件被触发时，data通过event.data传递给事件处理函数。
             handler(eventObject)：事件被触发时用来处理的函数。
             */
            $(window).on('scroll', function () {
                if ($(window).scrollTop() > 50) {
                    $('#bottomNav').show();
                } else if ($(window).scrollTop() < 1) {
                    $('#bottomNav').hide();
                }
            });
        })
    </script>
    <style type="text/css">
        .bottomNav {
            position: fixed; /*绝对定位*/
            bottom: 0;        /*屏幕左下角*/
            left: 0;
            width: 100%;
            height: 44px;

            background-color: gray;
            opacity: 0.8;     /*透明度 80%*/
            z-index: 999;     /**/

            overflow: visible;
            display: none;
        }

        #weixinUrl {
            color: white;
            text-decoration: none; /* 规定添加到文本的修饰 */
            border-style: solid;
            border-color: white;
            border-width: 0.1em;
            position: absolute;
            right: 12px;
            top: 12px;
        }
    </style>
</head>
<body>
<div>
    <p>网页内容</p>
</div>
<div id="bottomNav" class="bottomNav">
    <a id="weixinUrl" href="#">导航按钮</a>
</div>
</body>
</html>

转载于:https://my.oschina.net/CasparLi/blog/359662