如果滚动条到达底部,footer-nav 的透明度为1,否则为0.8;

html

<div class="footer-nav" id="footer">
<div class="fn-wrapper">
<a href="">
<img src="data:images/home.png">
<span>首页</span>
</a>
<a href="">
<img src="data:images/type.png">
<span>分类</span>
</a>
<a href="">
<img src="data:images/wechat.png">
<span>微信</span>
</a>
<a href="">
<img src="data:images/aipay.png">
<span>支付宝</span>
</a>
<a href="">
<img src="data:images/wifi.png">
<span>WIFI</span>
</a>
</div>
</div>

jquery

    function myScroll(id){
$(document).scroll(function(){
var d_height = $(document).height();
var s_top = $(document).scrollTop();
var w_height = $(window).height();
var _footer = $(id)
if(s_top >= (d_height - w_height)){
_footer.css("opacity","1")
}else{
_footer.css("opacity","0.8")
}
})
}
myScroll("#footer");

  

jquery 底部导航透明度变化的更多相关文章

  1. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  2. android应用开发--------------看RadioGroup源代码,写相似单选选项卡的集成控件(如底部导航,tab等等)

    博客为 有时个哥 原创.如需转载请标明出处:http://blog.csdn.net/ls703/article/details/46694967 watermark/2/text/aHR0cDovL ...

  3. Android底部导航栏创建——ViewPager + RadioGroup

    原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...

  4. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  5. 固定底部导航菜单-续集(BottomMenu-移动端V3.0)

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  6. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  7. 第三十七篇-BottomNavigationVIew底部导航的使用

    效果图: 添加底部导航和viewpaper 设置底部导航在底部 app:layout_constraintBottom_toBottomOf="parent" 新建四个fragme ...

  8. BottomNavigationBar 底部导航控件

    BottomNavigationBar 底部导航控件 属性 说明BottomNavigationBarItem 多个 item,iconSize icon大小currentIndex 默认选中第几个o ...

  9. Android (争取做到)最全的底部导航栏实现方法

    本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...

随机推荐

  1. 基于JQUERY写的 LISTBOX 选择器

    本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...

  2. contenteditable 属性

    定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...

  3. Windows服务简单实例

    1.定时器使用 partial class TimerService : ServiceBase { public TimerService() { InitializeComponent(); } ...

  4. mysqlbinlog恢复数据

    操作命令: 复制代码代码如下: show binlog events in 'mysql-bin.000016' limit 10; reset master 删除所有的二进制日志flush logs ...

  5. IIS 7 支持10万并发请求

    原文链接:http://www.cnblogs.com/dudu/archive/2009/11/10/1600062.html 今天下午17点左右,博客园博客站点出现这样的错误信息: Error S ...

  6. 嵌入式开发——boa服务器下的ajax与cgi通信

    博主最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服 ...

  7. 洛谷 P3392 涂国旗

    P3392 涂国旗 题目描述 某国法律规定,只要一个由N*M个小方块组成的旗帜符合如下规则,就是合法的国旗.(毛熊:阿嚏——) 从最上方若干行(>=1)的格子全部是白色的. 接下来若干行(> ...

  8. linuxmit下git安装和初级使用

    一.安装 sudo apt-get install git 二.配置 git config --global user.name "Your Name" git config -- ...

  9. angular.js学习

    1.第一个小例子 <!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输 ...

  10. trim()方法去除字符串首尾空格

    trim()方法去除字符串首尾空格 1.原生js                 Function trimStr(str){                         Return str.r ...