导航栏

.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 导航栏到底部上移的更多相关文章

  1. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  2. jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)

    <footer class="toolbar"> <ul> <li> <a href="{:url('Index/home')} ...

  3. Android开发技巧——实现在图标文本底部导航栏(更新)

    本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...

  4. Android (争取做到)最全的底部导航栏实现方法

    本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...

  5. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  6. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  7. 使用webpack从0搭建多入口网站脚手架,可复用导航栏/底部通栏/侧边栏,根据页面文件自动更改配置,支持ES6/Less

    之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...

  8. 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法

    问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...

  9. 这个demo是为解决IQKeyboardManager和Masonry同时使用时,导航栏上移和make.right失效的问题

    原文链接在我的个人博客主页 (一).引言: 在 IQKeyboardManager 和 Masonry 同时使用时,导航栏上移和make.right失效等问题多多. 其实我们完美的效果应该是这样的:* ...

随机推荐

  1. JDK配置步骤

    1.安装jkd1.6.0以上版本. 2.安装结束后,运行cmd.键入: java -version判断JDK是否安装成功,如下图所示. 3.首先需要到官网上下载JDK这款软件,本人下载的是jdk-6u ...

  2. 第十五章——自编码器(Autoencoders)

    自编码器是一种能够通过无监督学习,学到输入数据高效表示的人工神经网络.输入数据的这一高效表示称为编码(codings),其维度一般远小于输入数据,使得自编码器可用于降维(查看第八章).更重要的是,自编 ...

  3. Servlet:从入门到实战学习(3)---Servlet实例【图文】

    本篇通过图文实例给大家详细讲述如何建立一个Servlet,配置好运行环境并成功连接到MYSQL的数据库,进行数据的查询展示. 1.项目创建:IDEA -> Create New Project ...

  4. Jsp程序要在Tomcat下运行

    首先,回顾下jsp与servlet的区别与联系 JSP经过编译后就成了servlet JSP本质就是Servlet,JVM只能识别java类,不能识别JSP代码,Web容器将JSP代码编译成JVM能够 ...

  5. 面向对象进阶----->反射 getattr 和hasattr方法

    判断一个对象有没有血缘关系:isinstance() 里面写的是字类对象和父类名用来判断他们的关系 issubclass()是用来判断两个类是不是有继承的关系 ,括号内 写字类名和父类名  可以判断出 ...

  6. LNMP-day1-安装并配置

    Nginx安装 #Nginx [root@localhost downloads]# pwd /root/downloads #安装依赖pcre [root@localhost downloads]# ...

  7. 深入浅出SharePoint2010——请假系统无代码篇之权限设计

    首选我们需要区分3个跟权限相关的概念. 权限项目(Permission):最小的权限粒度.比如创建列表项.审批等. 权限级别(Permission Level):权限项目不能直接赋予用户或者用户组,只 ...

  8. python 网络编程 -- Tcp协议

    Socket是网络编程的一个抽象概念.通常我们用一个Socket表示“打开了一个网络链接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 客户端 大多数连接都是可靠 ...

  9. PyCharm最新2018激活码,最新方法

    内容:通过修改hosts文件,让pycharm不能够联网验证激活码的方式.我在kali和win10都成功了 1.修改hosts文件 Windows文件位置:C:\Windows\System32\dr ...

  10. Linux中配置ftp服务器

    1. 先用rpm -qa| grep vsftpd命令检查是否已经安装,如果ftp没有安装,使用yum  -y  install vsftpd 安装,(ubuntu 下使用apt-get instal ...