文档章节

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

CasparLi
 CasparLi
发布于 2014/12/23 16:57
字数 359
阅读 97
收藏 0
<!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>



© 著作权归作者所有

CasparLi
粉丝 15
博文 132
码字总数 26994
作品 0
成都
程序员
私信 提问
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.6K
11
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6
20 个用于处理页面滚动效果的 jQuery 插件

对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性。如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可...

oschina
2013/11/01
44.3K
22
Jquery关于点击后原导航消失和增加新按钮,点击取消按钮又还原为原导航的问题

底部导航点击一个按键后,原来的导航上的内容消失 出现新的按钮.点击取消按钮后 又显示为原导航。可是第一次可以,在此点击就出现错误。 var delDiv=document.getElementById("delete"); delD...

MyName杨杨杨-
2016/03/23
215
1
推荐 2013 年最新的 10 款 jquery 插件

日期:2013-3-7 来源:GBin1.com 我们精心挑选的10款2013年最新的jQuery插件,希望大家喜欢! jQRangeSider: 一个jQuery插件帮助你生成区域选择控件 一个帮助你生成iOS应用目录风格的jQuery插...

gbin1
2013/03/07
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
8
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
9
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
7
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部