JQ+css3 导航栏到底部上移
导航栏
- .navigation {
- position: fixed;
- bottom: 100px;
- right: 100px;
- z-index:;
- }
- .navigation {
- transition: bottom 2s;
- -webkit-transition: bottom 2s;
- }
JQ代码
- var nav = eval($('.navigation').offset().top - $(window).scrollTop());
- $(window).on('scroll', function() {
- var navh = $('.navigation').height();
- var foot = parseInt($('.footer').offset().top - $(this).scrollTop() - navh);
- /*console.log(nav - foot);*/
- if(nav == foot || nav > foot) {
- $('.navigation').css({
- 'position': 'fixed',
- 'bottom': '400px'
- });
- } else {
- $('.navigation').css({
- 'position': 'fixed',
- 'bottom': '100px'
- });
- }
- });
JQ+css3 导航栏到底部上移的更多相关文章
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)
<footer class="toolbar"> <ul> <li> <a href="{:url('Index/home')} ...
- Android开发技巧——实现在图标文本底部导航栏(更新)
本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...
- Android (争取做到)最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...
- Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
- React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
- 使用webpack从0搭建多入口网站脚手架,可复用导航栏/底部通栏/侧边栏,根据页面文件自动更改配置,支持ES6/Less
之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
- 这个demo是为解决IQKeyboardManager和Masonry同时使用时,导航栏上移和make.right失效的问题
原文链接在我的个人博客主页 (一).引言: 在 IQKeyboardManager 和 Masonry 同时使用时,导航栏上移和make.right失效等问题多多. 其实我们完美的效果应该是这样的:* ...
随机推荐
- 用FileZilla Server开FTP
FileZilla(教程)是经典的开源FTP解决方案,包括FileZilla客户端和FileZilla Server.其中,FileZilla Server的功能比起商业软件FTP Serv-U毫不逊 ...
- 巧用花生壳将局域网内的FTP和www服务器发布到互联网
一.目的:用生壳发布FTP和mail服务器到互连网. 二.网络环境:(出租房多家共用路由器上网,ADSL的1Mbps带宽,动态PPPOE拨号,帐号和密码存储在soho路由器中,路由器自动联机上网,并为 ...
- VS2017配置cuda9.1编译不过问题。
#if defined(_WIN32) #if _MSC_VER < 1600 || _MSC_VER > 1920 #error -- unsupported Microsoft Vis ...
- 沉淀,再出发:Docker的功能浅析
沉淀,再出发:Docker的功能浅析 一.前言 这段时间一直在使用docker,发现docker的技术有很多,从最开始的将自己的程序打包成docker中的镜像,然后上传和下载镜像并使用,再到后来的在集 ...
- 每年支付 m 次的年金
每年支付 m 次的年金 n 表示年数.m 表示每年的付款次数.i 表示年实际利率. 一.期末付年金(annuity-immediate payable mthly): 每年支付m次, 每次的付款为1/ ...
- [DBSDFZOJ 多校联训] Password
Password password.in/.out 描述 你来到了一个庙前,庙牌上有一个仅包含小写字母的字符串 s. 传说打开庙门的密码是这个字符串的一个子串 t,并且 t 既是 s 的前缀又是 s ...
- 浅析VS2010反汇编
第一篇 1. 怎样进行反汇编 在调试的环境下,我们能够很方便地通过反汇编窗体查看程序生成的反汇编信息. 例如以下图所看到的. 记得中断程序的运行,不然看不到反汇编的指令 看一个简单的程序及其生成的汇编 ...
- VNC Viewer
首先需要明确,什么事VNC , Virtual Network Computing ,VNC允许Linux系统可以类似实现像Windows中的远程桌面访问那样访问Linux桌面. 首先试试服务器装了V ...
- Linux磁盘管理.md
df df 即“可用磁盘”disk free,用于显示文件系统的磁盘使用情况.默认情况下 df 命令将以每块 1K 的单位进行显示所有当前已挂载的文件系统,如果你想以人类易读的格式显示 df 命令的输 ...
- [Python 模块] logging模块、Logger类
logging模块: 标准库里面的logging模块,在前面学习线程安全时曾用来解决print被打断的问题,这里会介绍logging模块的功能. logging模块是线程安全的,不需要客户做任何特殊的 ...