<!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. 0-4评价一个语言模型Evaluating Language Models:Perplexity

    有了一个语言模型,就要判断这个模型的好坏. 现在假设: 我们有一些测试数据,test data.测试数据中有m个句子;s1,s2,s3-,sm 我们可以查看在某个模型下面的概率: 我们也知道,如果计算 ...

  2. 【leetcode】802. Find Eventual Safe States

    题目如下: 解题思路:本题大多数人采用DFS的方法,这里我用的是另一种方法.我的思路是建立一次初始值为空的safe数组,然后遍历graph,找到graph[i]中所有元素都在safe中的元素,把i加入 ...

  3. 手把手搭建K3cloud插件开发环境

    最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...

  4. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  5. 洛谷 P3496 BZOJ 2079 [POI2010]GIL-Guilds

    题目描述 King Byteasar faces a serious matter. Two competing trade organisations, The Tailors Guild and ...

  6. C++ 对象间通信框架 V2.0 ××××××× 之（二）

    公共头文件:ss_type_def.h ================================================================================ ...

  7. 深入理解Spring（一）：初识Spring

    深入理解Spring(一):初识Spring 一. Spring介绍        Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnso ...

  8. SQL 批量修改一个字段的值为另一个字段的值

    AND create_time BETWEEN '2016-07-25 14:30:00' AND '2016-07-25 15:20:28'; AND create_time BETWEEN '20 ...

  9. vue双向绑定原理（简单实现原理附demo）

    先上效果图 简单的实现数据的双向绑定首先来了解一个东西:Object.defineProperty() https://developer.mozilla.org/zh-CN/docs/Web/Jav ...

  10. p2p传输协议

    老司机是如何飙车的——P2P传输协议 转载来自2017-03-27 15:23 点波蓝字关注变智者 秋明山上人行稀,常有车手较高低,如今车道依旧在,不见当年老司机.其实老司机们从未离去,只不过好的车手 ...