代码如下

<!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. web前端与后台数据访问的对象封装

    前言:通常情况下,在不使用angularJS/nodeJS/react等这类完整性的解决方案的js时,前端与后台的异步交互都是使用Ajax技术进行解决 一:作为java web开发工程师可能以下代码是 ...

  2. nyoj 456——邮票分你一半——————【背包思想搜索】

    邮票分你一半 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述      小珂最近收集了些邮票,他想把其中的一些给他的好朋友小明.每张邮票上都有分值,他们想把这些邮票分 ...

  3. js 常用事件句柄总结

    HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HT ...

  4. （六-1）Firefox插件安装

    1.安装火狐插件 ①旧版本firefox 火狐浏览器右上角-->附件-->获取更多附件-->搜索-->Firebug 安装 Firebug 扩展:https://addons. ...

  5. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  6. 关于JVM

    Java 中通过多线程机制使得多个任务同时执行处理,所有的线程共享JVM内存区域main memory,而每个线程又单独的有自己的工作内存,当线程与内存区域进行交互时,数据从主存拷贝到工作内存,进而交 ...

  7. android 短期计划

    http://www.jianshu.com/p/2a9fcf3c11e4 http://www.jianshu.com/p/5f6d79323923 activity启动模式: http://www ...

  8. 绘图和数据可视化工具包——matplotlib

    一.Matplotlib介绍 Matplotlib是一个强大的Python**绘图**和**数据可视化**的工具包. # 安装方法 pip install matplotlib # 引用方法 impo ...

  9. SharePoint Tricks - HTML & CSS & JavaScript

    1. 隐藏Quick Launch <style type="text/css">/*-- Hide Quick Launch --*/#s4-leftpanel{   ...

  10. CNN 和RNN 中input 长度不一致问题

    转自:https://www.jianshu.com/p/86d667ee3c62,感谢分享! pad_sequences & Masking layer 上面提到,文本数据也可以用CNN来处 ...