固定导航栏案例

<!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. Eclipse 无法引用到Maven 解决方法

    问题描述:打开Eclipse进入java EE视图下,发现原有的Maven Dependencies目录不存在,显示的是org.maven.ide.eclipse.MAVEN2_CLASSPATH_C ...

  2. 自己用C语言写NXP S32K116 serial bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 每次我有了新的EVA ...

  3. Apache安装使用笔记

    下载 打开网页http://httpd.apache.org/,点击 在download页面点击 然后在新页面选择 在新窗口选择 选择32位或64位apache下载,此处下载64位的apache: h ...

  4. v-charts x轴字体斜显示

    如下图,因为X轴内容太多,放不下,插件默认间隔显示需求:X轴内容要全部显示出来(只有斜显示或固定宽多余的用省略代替,本来需要就是想显示全部内容,所以只能取斜显示的方案) 先看看v-charts的文档: ...

  5. JDK SPI 机制

    一.概述 最早看到 SPI 这个机制是在 dubbo 实现 中,最近发现原来也不是什么新东西,竟然就是 JDK 中内置的玩意,今天就来一探究竟,看看它到底是什么玩意! SPI的全称是 Service ...

  6. Docker总结2020

    1. docker ps docker exec -it php7 /bin/bash 设置文件权限: chmod -R sign_tp5/ 重启nginx命令: nginx -s reload    ...

  7. VUE中使用XLSX实现导出excel表格

    简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...

  8. java面向对象入门(3)-java构造方法

    Java构造函数是特殊的方法(没有返回类型),使您可以在应用程序内部的其他类使用对象之前完全初始化对象状态.Java中的构造方法是使用new关键字调用的.下面让我们更深入地了解构造函数. 1.什么是j ...

  9. 用Markdown编写

    计算机视觉 图像分类 对象检测 目标检测 图像分割 语义分割 实例分割

  10. 剑指offer-面试题40-最下的k个数-快速排序

    /* 题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. */ /* 思路: 快速排序,找到第k+1大的数,其左边则为最 ...