1、描述

　　窗口滚动一定高度之后才让导航栏固定

2、要点

　　浏览器滚动的事件：$(window).scroll(functiuon(){

　　文档滚过的高度：　　　$(doucment).scrollTop();

　　　　　　　　　　　});

3、代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            *{margin: 0;padding: 0;}

            .content{

                width:1001px;

                margin: 0 auto;

            }

            .f{

                position:fixed;

                top:0;

                left:0;

            }

        </style>

        <script src="js/jquery-1.11.1.min.js"></script>

        <script type="text/javascript">

            $(function(){

                var topHeight=$(".top").height();

                console.log(topHeight);

                //窗口滚动事件

                $(window).scroll(function(){

                    if($(document).scrollTop()>=topHeight){

                        //css定位

                        $(".nav").addClass("f");

                        $(".content").css("margin-top",$(".nav").height());

                    }else {

                        $(".nav").removeClass("f");

                        $(".content").css("margin-top",0);

                    }

                });

            });

        </script>

    </head>

    <body>

        <div class="top">

            <img src="img/top.png" />

        </div>

        <div class="nav">

            <img src="img/nav.png"/>

        </div>

        <div class="content">

            <img src="img/main.png"/>

        </div>

    </body>

</html>

JQuery实现仿腾讯的固定导航栏的更多相关文章

  1. Jquery实现仿腾讯微薄的广播发表

    前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...

  2. 固定导航栏（jquery）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  4. jquery自定义插件-参数化配置多级菜单导航栏插件

    1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...

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

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

  6. iOS开发-仿大众点评iPad侧边导航栏

    昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...

  7. 简单仿京东"筛选"界面 双导航栏控制器共存 by Nicky.Tsui

    大概就是这么一个效果 如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图 那么我们可以通过加一个view到导航栏控制器的view里面来实现 //该view作为全局变 ...

  8. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  9. 固定导航栏demo

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

随机推荐

  1. vs找不到svn源代码管理插件之我见

    使用svn要安装两个文件,一个客户端:TortoiseSVN-1.8.msi,一个插件:AnkhSvn-2.5.msi:两个都安装好之后,在vs的tool(工具)选项卡中,选择自定义,然后选择sour ...

  2. mysql innobackupex备份工具

    先简单介绍一下这个工具:innobackupexinnobackupex比xtarbackup有更强的功能,它整合了xtrabackup和其他的一些功能,他不但可以全量备份/恢复,还可以基于时间的增量 ...

  3. http get with body data

    http://stackoverflow.com/questions/978061/http-get-with-request-body Yes, you can send a request bod ...

  4. JavaScript 常用功能实现一览（一）

    摘自于网络:http://www.cnblogs.com/joinger/articles/1506482.html 适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人基础知识:HT ...

  5. MySql 插入10位以上长度的字符报错or截断

    当a字段为int类型时: 如果用MyBatis向MySql插入10个字符以上长度的字符串,则会报错. 如果直接在MySql中用sql语句插入10个字符以上长度的字符串,则会变成最大的int类型数值:2 ...

  6. webwork <ww:if> 标签的使用

    如果在前台(JSP)取出后台的对象的属性,这个属性在后台是属于String 类型的,但若这个属性的值为数字,取出在前台就会默认为整形的值,所以在<ww:if> 判断里面不能加引号:< ...

  7. CSS Day04 css核心基础

    1.在HTML中引入CSS的方法 (1)行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.  例如:  <h1 style=“colo ...

  8. CodeForces 687A NP-Hard Problem（二分图判定）

    这本来一个挺简单的题呢,结果让我给想复杂了,二分图就是把图分成了两部分,然后不同颜色各一边,肯定是满足题目中说的边和点的条件的,真是犯二了.. 代码如下: #include<iostream&g ...

  9. Oracle Sql优化之分层查询(connect by)

    1.对于表中行与行存在父子关系时,可以通过connect by查询方式,查询行与行之间的父子关系 ),'-')|| empno as tempno, ename,mgr,level, decode(, ...

  10. 代码异味---Code smell

    程序员应该竭尽全力去写那些重复的代码.以下几点是我目前最需要改进的地方. 重复代码: 相同或者相似的代码存在于一个以上的地方. 长方法: 一个非常长的方法.函数或者过程. 巨类: 一个非常庞大的类. ...