固定导航栏案例

<!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. Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

    Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...

  2. JQuery教程之入门基础

    语法 $(selector).action() selector:选择器,类似css中的选择器 比如: $('.buttons-tab a') --class为buttons-tab下的子元素a ac ...

  3. 一篇文章带你搞定 ElasticSearch 术语

    这篇文章主要介绍 ElasticSearch 的基本概念,学习文档.索引.集群.节点.分片等概念,同时会将 ElasticSearch 和关系型数据库做简单的类比,还会简单介绍 REST API 的使 ...

  4. 浅析word2vec（一）

    1 word2vec 在自然语言处理的大部分任务中,需要将大量文本数据传入计算机中,用以信息发掘以便后续工作.但是目前计算机所能处理的只能是数值,无法直接分析文本,因此,将原有的文本数据转换为数值数据 ...

  5. ASP.NET Core MVC学习笔记

    最近由于疫情紧张,遂在家办公,在领导的带领下,学习了一下.Net Core MVC. 一,构建web应用 1.选择c#-所有平台-web  找到ASP.NET Core web应用程序 2.项目命名之 ...

  6. CHECK INDEX OF TABLE

    SELECT INDEX_NAME,COLUMN_NAME FROM ALL_IND_COLUMNS WHERE table_name = '';

  7. 软件模拟spi的注意事项

    前几天遇到了软件模拟spi的时候,读和写不一致的现象,后来仔细研究了一下,其实是时序性问题不对. spi的有四种时序,硬件实现的时候,很简单,初始化后直接调用api即可.但是软件模拟就比较麻烦. 举例 ...

  8. TensorFlow安装-(Ubuntu18.04.3 & Anaconda3)

    1.背景 使用ubuntu18.04.3安装Anaconda3之后使用网上教程安装tensorflow失败,踩了多个坑,特此总结经验 附官方教程:https://tensorflow.google.c ...

  9. 两张图搞清楚Eclipse上的Web项目目录

    从MyEclipse转到Eclipse起初有点不习惯eclipse的目录结构,顺手一查看到的文章帮助很大,转载一下: 原文链接:https://www.jianshu.com/p/91050dfcbe ...

  10. instanceof读解

    function instance(l,r){ let 0 = r.prototype; let v = l.__proto__; while(true){ if(v === null){ retur ...