导航栏

  1. .navigation {
  2. position: fixed;
  3. bottom: 100px;
  4. right: 100px;
  5. z-index:;
  6. }
  7. .navigation {
  8. transition: bottom 2s;
  9. -webkit-transition: bottom 2s;
  10. }

JQ代码

  1. var nav = eval($('.navigation').offset().top - $(window).scrollTop());
  2. $(window).on('scroll', function() {
  3. var navh = $('.navigation').height();
  4. var foot = parseInt($('.footer').offset().top - $(this).scrollTop() - navh);
  5. /*console.log(nav - foot);*/
  6. if(nav == foot || nav > foot) {
  7. $('.navigation').css({
  8. 'position': 'fixed',
  9. 'bottom': '400px'
  10. });
  11. } else {
  12. $('.navigation').css({
  13. 'position': 'fixed',
  14. 'bottom': '100px'
  15. });
  16. }
  17. });

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. 用FileZilla Server开FTP

    FileZilla(教程)是经典的开源FTP解决方案,包括FileZilla客户端和FileZilla Server.其中,FileZilla Server的功能比起商业软件FTP Serv-U毫不逊 ...

  2. 巧用花生壳将局域网内的FTP和www服务器发布到互联网

    一.目的:用生壳发布FTP和mail服务器到互连网. 二.网络环境:(出租房多家共用路由器上网,ADSL的1Mbps带宽,动态PPPOE拨号,帐号和密码存储在soho路由器中,路由器自动联机上网,并为 ...

  3. VS2017配置cuda9.1编译不过问题。

    #if defined(_WIN32) #if _MSC_VER < 1600 || _MSC_VER > 1920 #error -- unsupported Microsoft Vis ...

  4. 沉淀,再出发:Docker的功能浅析

    沉淀,再出发:Docker的功能浅析 一.前言 这段时间一直在使用docker,发现docker的技术有很多,从最开始的将自己的程序打包成docker中的镜像,然后上传和下载镜像并使用,再到后来的在集 ...

  5. 每年支付 m 次的年金

    每年支付 m 次的年金 n 表示年数.m 表示每年的付款次数.i 表示年实际利率. 一.期末付年金(annuity-immediate payable mthly): 每年支付m次, 每次的付款为1/ ...

  6. [DBSDFZOJ 多校联训] Password

    Password password.in/.out 描述 你来到了一个庙前,庙牌上有一个仅包含小写字母的字符串 s. 传说打开庙门的密码是这个字符串的一个子串 t,并且 t 既是 s 的前缀又是 s ...

  7. 浅析VS2010反汇编

    第一篇 1. 怎样进行反汇编 在调试的环境下,我们能够很方便地通过反汇编窗体查看程序生成的反汇编信息. 例如以下图所看到的. 记得中断程序的运行,不然看不到反汇编的指令 看一个简单的程序及其生成的汇编 ...

  8. VNC Viewer

    首先需要明确,什么事VNC , Virtual Network Computing ,VNC允许Linux系统可以类似实现像Windows中的远程桌面访问那样访问Linux桌面. 首先试试服务器装了V ...

  9. Linux磁盘管理.md

    df df 即“可用磁盘”disk free,用于显示文件系统的磁盘使用情况.默认情况下 df 命令将以每块 1K 的单位进行显示所有当前已挂载的文件系统,如果你想以人类易读的格式显示 df 命令的输 ...

  10. [Python 模块] logging模块、Logger类

    logging模块: 标准库里面的logging模块,在前面学习线程安全时曾用来解决print被打断的问题,这里会介绍logging模块的功能. logging模块是线程安全的,不需要客户做任何特殊的 ...