代码如下

<!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. HDU 5596 ——GTW likes gt——————【想法题】

    GTW likes gt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)To ...

  2. flutter initializing gradle终极解决方案

    自己开发的公众号,可以领取淘宝内部优惠券 修改flutter.gradle文件 这种做法网上一大堆的教程,如果你还没改过建议先试下,比如这篇 Flutter 运行 一直Initializing gra ...

  3. C#-01.语法基础

    a. 语法基础 i. 命名空间(namespace):是 C# 中组织代码的方式,用来声明命名空间 . 语法:namespace 命名空间名称{ //命名空间的声明 } . 作用:可以把紧密相关的一些 ...

  4. ES6 克隆对象

    浅克隆:只能克隆原始对象自身的值,不能克隆它继承的值 方法一: function clone(origin) { return Object.assign({}, origin); } 方法二: fu ...

  5. 使用vue-router切换页面时，获取上一页url以及当前页面url

    今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我 ...

  6. sqlServer游标的使用

    USE [PatPD1]GO/****** Object:  UserDefinedFunction [dbo].[fun_GetConditionInner]    Script Date: 201 ...

  7. Java的API及Object

    API: Java API就是JDK中提供给我们使用的类,这些类将底层的代码实现封装了起来,我们不需要关心这些类是如何实现的,只需要学习这些类如何使用即可. 源文件使用方法: Object类概述: O ...

  8. html-框架标签的使用

    <frameset> - rows:按照行进行划分 ** <frameset rows="80,*"> - cols:按照列进行划分 ** <fram ...

  9. Java & COM

  10. Regular Expression 正则表达式

    1. "^"表示以什么字符开始,"$"表示以什么字符结束: 2. \w表示字符类,包括大小写字母和数字: 3. “+”表示一个或多个,"*" ...