固定导航栏案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0

    }

    img {

      vertical-align: top;

    }

    .main {

      margin: 10px auto 0;

      width: 1000px;

    }

    .fixed {

      position: fixed;

      top: 0;

      left: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(window).scroll(function () {

        //判断卷去的高度超过topPart的高度

        if ($(window).scrollTop() >= $(".top").height()) {

          //1. 让navBar有固定定位

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

          //2. 让mainPart有一个marginTop

          $(".main").css("marginTop", $(".nav").height() + 10);

        } else {

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

          $(".main").css("marginTop", 10);

        }

      });

    });

  </script>

</head>

<body>

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

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

  </div>

  <div class="nav" id="navBar">

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

  </div>

  <div class="main" id="mainPart">

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

  </div>

</body>

</html>

jQuery---固定导航栏案例的更多相关文章

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

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

  2. 固定导航栏（jquery）

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

  3. python 全栈开发，Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

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

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

  5. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  7. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  8. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. linux硬盘分区、格式化、挂载超详细步骤（fdisk/parted））

  2. [未完成]ECRound 80

    Educational Codeforces Round 80 (Rated for Div. 2)A 大意:寻找x使得等式<=n,若满足情况输出YES否则NO 解法:纯数学题,先构造函数f(x ...

  3. 0x01 C语言-编写第一个hello world

    学习每一个编程语言都是从 "Hello world!" 开始的,这好像就是编程界一条不成文的规定一样. 在这篇文章中,我将教大家编写一个可以输出 "Hello world ...

  4. 陶陶摘苹果(升级版)P1478_巧妙模拟

    如此水的题居然让我绞尽脑汁,我在想我是不是快退役了. 这道题我看见很多解法:贪心,背包,桶排乱七八糟一大堆. 题目 题目描述 又是一年秋季时,陶陶家的苹果树结了 n 个果子.陶陶又跑去摘苹果,这次他有 ...

  5. Linux动态DMA映射

    1. 几种地址类型 虚拟地址 Linux内核使用的地址是虚拟地址,数据类型为void *.例如,kmalloc()和vmalloc()函数返回值就是虚拟地址. 物理地址 处理器真实地址总线上的地址,数 ...

  6. vue实现打印功能

    通过npm 安装插件 1.安装  npm install vue-print-nb --save 2.引入  安装好以后在main.js文件中引入 import Print from 'vue-pri ...

  7. junit 运行（eclipse + IDEA）

    记得刚用IDEA  开发的时候, 什么都还不熟,以为junit 运行还跟eclipse 一样, 结果试了后才知道是不一样的. 现在刚好写junit 相关的,也就都记录下来吧 Eclipse:eclip ...

  8. jQuery---offset方法和position方法

    offset方法和position方法 获取元素的相对于document的位置 //获取元素的相对于document的位置 $(".son").offset(); console. ...

  9. 【Git】git使用 - 冲突conflict的解决演示

    冲突的解决 (如果git使用不熟练)建议在push不了时,pull之前.在本地创建一个新的分支并commit到local,以保证本地有commit记录,万一出什么问题,可以找回代码,以免代码丢失. ( ...

  10. CVE-2019-1388 Windows UAC提权

    漏洞简述 该漏洞位于Windows的UAC(User Account Control,用户账户控制)机制中.默认情况下,Windows会在一个单独的桌面上显示所有的UAC提示——Secure Desk ...