如果滚动条到达底部,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. highcharts的使用

    步骤: 1. 去highcharts官网下载最新版本 2. 在.aspx页面添加引用 例: <link href="../JS/highcharts/css/highslide.css ...

  2. (转)2.4.1 基础知识--添加服务引用与Web引用的区别

    <Web服务开发学习实录>第2章构建ASP.NET Web服务,本章我们将学习创建Web服务的各种方法,并重点对使用Visual Studio创建ASP.NET Web服务和修改Web服务 ...

  3. XML配置silverlight ,wcf 解析xml

    XML 代码: <?xml version="1.0" encoding="utf-8" ?><ChartSet  xmlns:xsi=&qu ...

  4. .NET踩坑记录【不断更新】

    NET 4.0 Tasks 使用 ThreadPool 可设置最大并发级别. 多个WebClient多线程下载受System.Net.ServicePointManager.DefaultConnec ...

  5. g++实用技巧

    查看代码文件包含了哪些头文件 g++ -M FileName

  6. C++中引用和指针详解

    先来分析指针这个东东: 从概念上讲,指针本质上就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 上面的图表示了程序运行时变量的值 ...

  7. JS创建对象的七大模式

    1. 工厂模式 function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = ...

  8. Lua 字符串 匹配模式 总结

    字符类 %a --字母alpha %d --数字double %l --小写字母lower %u --大写字母upper %w --字母和数字word %x -- 十六进制 %z --代表0 zero ...

  9. win8(64位)下memcache安装时报错“ failed to install service or service already installed” 与安装

    解决办法: 1.找到cmd.exe文件(c:\windows\system32\cmd.exe) 2.右键cmd.exe以管理员方式运行 3.把php_memcache.dll放到php的ext目录: ...

  10. WORD-如何解除WORD文档的锁定

    Word文档保护破解 般来说WORD文档有两种密码打开密码和文档保护密码下面介绍几种破解文档保护密码方法 方法1:插入文件法 启动WORD新建空白文档执行插入→文件打开插入文件对框定位需要解除保护文档 ...