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失效等问题多多. 其实我们完美的效果应该是这样的:* ...
随机推荐
- Android解析WindowManagerService(一)WMS的诞生
前言 此前我用多篇文章介绍了WindowManager,这个系列我们来介绍WindowManager的管理者WMS,首先我们先来学习WMS是如何产生的.本文源码基于Android 8.0,与Andro ...
- visual studio code 插入当前时间插件 -- Insert Time Stamp
使用方法:ctrl + f5 效果:
- jsonp和ajax的区别
一.Ajax工作原理 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化.对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
- iOS8模糊效果UIVisualEffectView的使用
iOS8模糊效果UIVisualEffectView的使用 效果: 源码: // // ViewController.m // EffectView // // Created by XianMing ...
- 安装PHPphp-5.4.4
一.下载PHPphp-5.4.4 [root@aliyun software]# pwd /software[root@aliyun software]# wget http://mirrors.so ...
- Nginx学习---Nginx的详解_【all】
1.1. Nginx简介 1.什么是nginx nginx:静态的,开源的www软件,可以解析静态的小文件(低于1M ),支持高并发占用较发少的资源(3W并发,10个进程,内存150M),跨平台 te ...
- ASP.NET Core 返回文件、用户下载文件,从网站下载文件,动态下载文件
ASP.NET Core 中,可以在静态目录添加文件,直接访问就可以下载.但是这种方法可能不安全,也不够灵活. 我们可以在 Controller 控制器中 添加 一个 Action,通过此Action ...
- 沉淀再出发:kafka初探
沉淀再出发:kafka初探 一.前言 从我们接触大数据开始,可能绕在耳边的词汇里面出现的次数越来越多的就包括kfaka了.kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息, ...
- 操作dict时避免出现KeyError的几种方法
在读取dict的key和value时,如果key不存在,就会触发KeyError错误,如: Python t = { ', ', ', } print(t['d']) 就会出现: <code c ...
- Mybatis和Mysql的Json类型
Mysql5.7新增加了Json类型字段,但是目前Mybatis中并不支持 1.新建MybatisJsonTypeHandler.java import com.fasterxml.jackson.a ...