代码如下

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0}

        img{

            vertical-align: top;

        }

        .main{

            margin:0 auto;

            width:1000px;

            margin-top:10px;

        }

        .fixed {

            position: fixed;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="top" id="top">

    <img src="data:images/top.png" alt=""/>

</div>

<div class="nav" id="Q-nav">

    <img src="data:images/nav.png" alt=""/>

</div>

<div class="main">

    <img src="data:images/main.png" alt=""/>

</div>

</body>

</html>

<script src="my.js" type="text/javascript"></script>

<script>

   var nav = $("Q-nav");

   var navTop = nav.offsetTop;  // 得到导航栏距离顶部的距离  168

   console.log(navTop);

    window.onscroll = function() {

       // console.log(nav.offsetTop);

        if(scroll().top >= navTop)

        {

            // alert("到位置了");

            nav.className = "nav fixed";

        }

        else

        {

            nav.className = "nav";

        }

    }

</script>

my.js为自己封装的小插件

function scroll() {

    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器

    {

        return {

            left: window.pageXOffset,

            top: window.pageYOffset

        }

    }

    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD

    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>

    {

        return {

            left: document.documentElement.scrollLeft,

            top: document.documentElement.scrollTop

        }

    }

    return { //  剩下的肯定是怪异模式的

        left: document.body.scrollLeft,

        top: document.body.scrollTop

    }

}

固定导航栏demo的更多相关文章

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

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

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

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

  3. 固定导航栏（jquery）

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

  4. 一个可以拓展的垂直多级导航栏 Demo

    大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: <!DOCTYPE ...

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

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

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

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

  7. 1+X学习日志——导航栏demo

    初级菜鸟的作品,各位大佬见笑了   <!DOCTYPE html> <html lang="en"> <head>     <meta c ...

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

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

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

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

随机推荐

  1. http反向代理之haproxy详解

    1.反向代理定义 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...

  2. tornado基本使用【服务】

    1.安装 2.请求处理程序和请求参数 1.安装 pip install tornado 2.请求处理程序和请求参数 Tornado 的 Web 程序会将 URL 或者 URL 范式映射到 tornad ...

  3. 查看和设置Oracle数据库字符集

    数据库服务器字符集select * from nls_database_parameters,其来源于props$,是表示数据库的字符集. 客户端字符集环境select * from nls_inst ...

  4. Google Kickstart在线测试规则以及注意事项

    谷歌招聘在如火如荼的进行中,进谷歌都需要经过谷歌kickstart在线测试,然后过了之后还有五轮的面试- -.好吧毕竟你待遇高,你强你有理.. 下面介绍一下进谷歌的第一关google kickstar ...

  5. scss-变量分隔符

    scss的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线. 在使用中划线还是下划线来进行变量分隔完全根据个人喜好. scss完全兼容这两种写法,也就是说scss认为中划线和下划线是完 ...

  6. 为 Drupal 7 构建一个新主题

    主题解释了 Drupal 网站的用户界面 (UI).虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法.本文演示了如何创建一个新的 Drupal 7 主题. Drup ...

  7. Linux服务器性能评估与优化（二)

    网络内容总结(感谢原创) 1.Linux内核参数优化 内核参数是用户和系统内核之间交互的一个接口,通过这个接口,用户可以在系统运行的同时动态更新内核配置,而这些内核参数是通过Linux Proc文件系 ...

  8. 【阿里云产品公测】PTS压力测试服务器性能

    作者:阿里云用户xsnjxjj 在PTS服务之前,经常使用webbench来对服务器进行压力测试,在看到阿里云PTS服务的介绍以后,深深的被PTS强大的功能所吸引     非常感谢阿里云团队给予的测试 ...

  9. 【JS 综合】JS综合

    视频教程链接:http://www.xuexi111.com/s/javascript/ 张孝祥:http://www.21edu8.com/pcnet/programming/26685/

  10. 《ArcGIS Runtime SDK for Android开发笔记》——（15）、要素绘制Drawtools3.0工具DEMO

    1.前言 移动GIS项目开发中点线面的要素绘制及编辑是最常用的操作,在ArcGIS Runtime SDK for iOS 自带AGSSketchLayer类可以帮助用户快速实现要素的绘制,图形编辑. ...