<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>固定导航栏</title>

<script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>

    <style>

        *{ padding:0px; margin:0px;}

        .big{ width:100%;height:4000px; background:pink; margin:0 auto; overflow:hidden;}

        .sub{ width:100%;height:100px; background:yellow; }

        .fixed{ width:100%; height:80px; background:#F66; text-align:center; top:0px;}

    </style>

</head>

<body>

<div class="big">

    <div class="sub">

        图片区

    </div>

    <div class="fixed">我是固定的哟</div>

    我是最大的div

</div>

</body>

</html>

<script>

    $(document).ready(function(e) {

        t = $('.fixed').offset().top;//获取匹配元素在当前视口的相对偏移 .offset().top：获得位移高度

        mh = $('.big').height();

        fh = $('.fixed').height();

        $(window).scroll(function(e){

            s = $(document).scrollTop();

            if(s > t - 10){

                $('.fixed').css('position','fixed');

                if(s + fh > mh){

                    $('.fixed').css('top',mh-s-fh+'px');

                }

            }else{

                $('.fixed').css('position','');

            }

        })

    });

</script>

固定导航栏（jquery）的更多相关文章

  1. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  2. JS---封装getScroll函数 & 案例：固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  3. JQuery实现仿腾讯的固定导航栏

    1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...

  4. 固定导航栏demo

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. js实现用按钮控制网页滚动、以及固定导航栏效果

    实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...

  6. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

  7. 淘宝分类导航条；纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  9. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

随机推荐

  1. Python中decode与encode的区别

    摘抄: 字符串在Python内部的表示是Unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符解码(decode)成unicode,再从unicode编码 ...

  2. linux运维、架构之路-rpm定制、本地yum仓库搭建

    一.定制rpm包 1.环境 [root@m01 ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@m01 ~]# uname - ...

  3. BZOJ 2427: [HAOI2010]软件安装 tarjan + 树形背包

    Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和 ...

  4. 【CF1252G】Performance Review（线段树）

    题意: n,q<=1e5,a[i],b[i][j]<=1e9,保证能力值互不相同,询问之间保留前面的影响 思路:其实把大于a[1]的看成0,小于的看成1,设第i天小于a[1]的有b[i]个 ...

  5. GPSMap程序源代码

    1. 界面 第一次打开时选择工程文件 MainActivity.java Tools.OpenDialog(new ICallback(){ public void OnClick(String pa ...

  6. window 连接服务器工具

    Xshell xftp 下载网址 以上两个软件均免费, 只需要邮件激活即可. 其中 xshell 主要用来连接服务器,方便使用命令行.xftp 方便传输文件.

  7. 使用 Markdown 写博客

    后台设置(左侧边栏区找到-设置默认编辑器). 设置为 Markdown 后保存,即可在编辑新博客时生效.

  8. [CSP-S模拟测试]:大佬(kat)（数学期望）

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他发现$katarina$大佬真是太强了,于是就学习了一下$katarina$大佬的做题方法.比如这是一本有$n$道题的练习册,$ ...

  9. #20175201张驰 实验三 敏捷开发与XP实践

    实验步骤 (一)敏捷开发与XP 一.敏捷开发与XP实践-1 ①实验要求: 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse ...

  10. 转:SqlBulkCopy类进行大数据(一万条以上)插入测试

    转自:https://www.cnblogs.com/LenLi/p/3903641.html 结合博主实例,自己测试了一下,把数据改为3万行更明显!! 关于上一篇博客中提到的,在进行批量数据插入数据 ...