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失效等问题多多. 其实我们完美的效果应该是这样的:* ...
随机推荐
- QTableview 获取鼠标坐标的item(QModelIndex)
要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...
- Monkey测试运用实例
测试命令是多样性的,根据个人的测试思路,设计执行你想要的测试命令 1.monkey -p com.junte -v 1000 团贷网模拟用户随机操作,无延时点击1000次 -p测试包 ...
- 闭包&执行环境和作用域
闭包 执行环境和作用域参考:<javascript高级程序设计(第3版)>4.2节
- 两种开源聊天机器人的性能测试(二)——基于tensorflow的chatbot
http://blog.csdn.net/hfutdog/article/details/78155676 开源项目链接:https://github.com/dennybritz/chatbot-r ...
- 【Leetcode】【Easy】Isomorphic Strings
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- oracle sql练习 菜鸟入门!
进入公司 ,首先是进行SQL培训 一下是针对oracle的emp与dept表进行的基础查询 --1.选择部门30中的所有员工: ; --2.列出所有办事员(CLERK)的姓名,编号和部门编号: sel ...
- LNMP-day3-php扩展缓存插件
perl的编译问题 [root@localhost php5.6.33]# echo 'export LC_ALL=C' >> /etc/profile #设置环境变量,解决后面perl ...
- 阿里云 CentOS 镜像和 EPEL 源
配置阿里云网络yum源 阿里云镜像源地址http://mirrors.aliyun.com/ 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.re ...
- TcpListerner、TcpClient 、邮件发送MailMessage、SmtpClient类
一.服务端 TcpListener server = );//定义监听器 server.Start();//启动监听器 ]; //创建一个容器用于接受数据 string data = null; wh ...
- Python2.7 - IMOOC - 3
第三章 Python变量和数据类型 3-4.变量 变量名必须是大小写英文.数字和下划线(_)的组合,且不能用数字开头. 同一个变量可以反复赋值,而且可以是不同类型的变量,例如: a = 123 # a ...