如果滚动条到达底部,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. SQL cmd 实用工具学习 -1

    启动 sqlcmd 实用工具并连接到 SQL Server 的默认实例 在"开始"菜单上,单击"运行". 在"打开"框中,键入 cmd,然后 ...

  2. delete语句与reference约束 FK_subplan_job_id冲突问题,导致job无法删除解决办法

    在SQL Server 2008上删除已运行维护计划后,维护计划job没有自动删除掉,手工再删除维护计划job,提示删除失败. 错误现象:delete  语句与 reference 约束"F ...

  3. 解决Hibernate中不同包内有形同实体导致映射失败的问题

    报错代码如下: Caused by: org.hibernate.DuplicateMappingException: duplicate import: Engin refers to both t ...

  4. C++内存对象布局

    本章主要介绍了c++类中成员变量.函数对象的在内存中布局. 当c++类中不包含virtual机制类的函数时,内部nostatic member被包含在每一个class object之中,就想c str ...

  5. ubuntu14.04中解压缩window中的zip文件,文件名乱码的解决方法

    在windows上压缩的文件,是以系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 通过unzip行命令解压,指定字符 ...

  6. select p.id, name,ROW_NUMBER() over(PARTITION by name order by p.id) names from person p

    select p.id, name,ROW_NUMBER() over(PARTITION  by name order by p.id) names from person p

  7. 开心学习系列学习笔记-----nodejs缺点

    不支持故障恢复   不知你是否在调试的过程中注意,当程序有错误发生时,整个进程就会结束,需要重  新在终端中启动服务器.这一点在开发中无可厚非,但在产品环境下就是严重的问题  了,因为一旦用户访问时触 ...

  8. hdu 3339 In Action

    http://acm.hdu.edu.cn/showproblem.php?pid=3339 这道题就是dijkstra+01背包,先求一遍最短路,再用01背包求. #include <cstd ...

  9. 使用SALT-API进入集成开发的简单样例

    测试的时候,可以CURL -K,但真正作集成的时候,却是不可以的. 必须,不可以让TOKEN满天飞吧. 现在进入这个阶段了.写个样例先: import salt import salt.auth im ...

  10. Ghost源代码

    http://download.csdn.net/download/xiaoshuai0101/4739231 彻底的掩藏磁盘,让病毒和破坏的人没有一点办法上传者 guizhoutiger