固定导航栏案例

<!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. 小记centos7.5下yum安装cobbler遇到的问题

    问题1:执行cobbler sync同步命令报错,提示dhcpd服务错误和Python源码错误 [root@server ~]# cobbler sync #<===执行cobbler同步的时候 ...

  2. 珠峰-express

    ##### #### 中间件的作用 #### 自己写的Route方法 #### #### 中间件

  3. 部署LAMP环境搭建一个网站论坛平台

    修改主机名 Hostname openstack-001 Hostname Login 修改本地域名解析 Vi /etc/hosts 最后一行添加 192.168.1.56 openstack-001 ...

  4. ssh常用命令大全

    ssh命令速查表 ssh-add ~/.ssh/your_private_key:输入你的私钥密码 就可以把你的私钥加入到ssh-agent中去 ssh-add -D: 删除所有管理的密钥 ssh-a ...

  5. 嗅探、DNS劫持配合CS钓鱼

    本章节讲述的是嗅探和DNS劫持的利用 嗅探:同一个局域网下,原本应该丢弃的包,被保留下来,即使不开双向欺骗 Driftnet工具:Driftnet监视网络流量,抓取网络流量中的JPEG和GIF图像.这 ...

  6. 仁和药业顺利出局，布局地产万科A

    仁和药业布局到第二单,被止盈了,盈利大约1.1%.这几日地产行业回调明显,所以布局了万科A. 资金量W11.8 建仓价格28.6 加仓系数1.5 加仓间隔2.70% 总盈利比6.50% 期待吧!

  7. 在pycharm中如何设置代码对齐竖线

    方法:启动pycharm软件,打开一个文件,点 file 菜单,选择 settings,在弹出的setting菜单中依次选择editor-->general-->appearance,然后 ...

  8. Html介绍,标签的语法

    1.标签由英文"<"和">"括起来组成,如<html>就是一个标签2.html中的标签一般都是成对成对出现的,分为开始标签和结束标签.结 ...

  9. 回炉重造之重读Windows核心编程-004-进程

    进程是一个正在运行的程序的实例,由内核对象和地址空间组成.进程是不活泼的,执行地址空间中代码的是在它的环境中运行线程.每个线程都需要自己的一组CPU寄存器和堆栈. 为了让所有线程都能运行,操作系统就要 ...

  10. 洛谷P1331-搜索基础-什么是矩形？(我的方案)

    原题链接:https://www.luogu.com.cn/problem/P1331 简单来说就是给出一个由‘#’和‘.‘组成的矩阵.需要识别存在几个矩形(被完全填充的).如果有矩形相互衔接则认为出 ...