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失效等问题多多. 其实我们完美的效果应该是这样的:* ...
随机推荐
- Python 常用文件
获取当前文件的路径: from os import path d = path.dirname(__file__) #返回当前文件所在的目录 # __file__ 为当前文件, 若果在ide中运行此行 ...
- Python数据类型-字典
字典(dict) 字典是key:value形式的一种表达形式,例如在Java中有map,JavaScript中的json,Redis中的hash等等这些形式.字典可以存储任意的对象,也可以是不同的数据 ...
- vue-cli + webpack自动生成项目
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack palanWebsit ...
- hdu-3397 Sequence operation 线段树多种标记
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3397 题目大意: 0 a b表示a-b区间置为0 1 a b表示a-b区间置为1 2 a b表示a- ...
- 2016424王启元 Exp6信息搜集与漏洞扫描
一.原理与实践说明 1.实践内容 本实践的目标是掌握信息搜集的最基础技能.具体有: 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫描技术:主机发现.端口扫描.OS及服务版本探测. ...
- luogu P2742 【模板】二维凸包
嘟嘟嘟 没错,我开始学凸包了. 其实挺简单的. 前置技能: 1.极坐标系 2.向量叉积 1.极坐标系 就是一种二维坐标系.只不过两个坐标分别表示向量和极轴的角度和自身的长度.对于不同的问题,极轴可以自 ...
- 【react】慕课网视频学习笔记
1.JSX:语法糖,对语言的功能并没有影响,但更方便程序员使用,增强可读性. 2.jsFiddle:前端在线调试工具 3.为什么要把this额外声明成_self变量,因为window.setTimeo ...
- BurpSuite Intruder 4种攻击模式
BurpSuite intruder attack-type 4种爆破模式 Sniper 单参数爆破,多参数时同一个字典按顺序替换各参数,总之初始值有一个参数不变 Battering ram 多参数同 ...
- ethereumjs/ethereumjs-block-3-tests
之前可以先了解一下另一个模块,看本博客的ethereumjs/ethereumjs-common部分内容 通过tests测试文件能够帮助更好了解API的使用 ethereumjs-block/test ...
- Android SDK Manager仅有一个版本的问题
搭建好MonkeyRunner的环境之后,建立虚拟器的时候发现SDK的管理器中只有4.3的版本,查阅了一下百度,问题解决如下: (1)在c:\Windows\System32\etc\hosts文件中 ...