一、HTML布局

首先写HTML布局

  1. <body>
  2. <div id="wrap"></div>
  3. </body>

二、CSS样式

给点简单的样式

  1.     <style>
  2.     *{
  3.           margin: 0;
  4.           padding: 0;
  5.       }
  6.     body{
  7.         height: 2000px;
  8.         background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%);
  9.     }
  10.     #wrap{
  11.         background-color: rgba(0,0,0,0.2);
  12.         width: 100%;
  13.         height: 100px;
  14.         margin-top: 100px;
  15.     }
  16.     #wrap[data-fixed="fixed"]{
  17.         position: fixed;
  18.         top:0;
  19.         left: 0;
  20.         margin: 0;
  21.     }
  22.     </style>

三、JS代码

1、面向过程

直接编写5行代码搞定

  1. <script>
  2.     var obj = document.getElementById("wrap");
  3.     var ot = obj.offsetTop;
  4.     document.onscroll = function () {
  5.         var st = document.body.scrollTop || document.documentElement.scrollTop;
  6.         obj.setAttribute("data-fixed",st >= ot?"fixed":"")}
  7. </script>

2、面向对象

JS改进，封装成吸顶函数 ceiling.js 方便以后直接Ctrl+C，Ctrl+V

封装方法

  1. /*
  2.  * 封装吸顶函数，需结合css实现。
  3.  * 也可以直接用js改变样式，可以自行修改。
  4.  */
  5.     function ceiling(obj) {
  6.         var ot = obj.offsetTop;
  7.         document.onscroll = function () {
  8.             var st = document.body.scrollTop || document.documentElement.scrollTop;
  9.             /*
  10.              * 在这里我给obj添加一个自定义属性。className可能会影响原有的class
  11.              * 三元运算使代码更简洁
  12.              */
  13.             obj.setAttribute("data-fixed",st >= ot?"fixed":"");
  14.         }
  15.     }

调用方法

  1. <script src="ceiling.js"></script>
  2. <script>
  3.     window.onload = function () {
  4.          /*获取导航对象*/
  5.         var wrap = document.getElementById("wrap");
  6.         ceiling(wrap) /*调用吸顶函数  */
  7.     };
  8. </script>

这是最简单版本，欢迎大家在此基础上改进。

5行js代码搞定导航吸顶效果的更多相关文章

  1. 180行ruby代码搞定游戏2048

    最今在玩2048这款小游戏,游戏逻辑简单,很适合我这样的对于游戏新入行的人来实现逻辑.于是选择了最拿手的ruby语言来实现这款小游戏的主要逻辑.还是挺简单的,加起来4小时左右搞定. 上代码: requ ...

  2. 200行Java代码搞定计算器程序

    发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示 ...

  3. 几行JavaScript代码搞定Iframe 自动适应

    场景:Iframe嵌入flash,希望flash能随着页面的resize而resize. 主要代码: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  4. 【备忘】windows环境下20行php代码搞定音频裁剪

    先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...

  5. 80行Python代码搞定全国区划代码

    微信搜索:码农StayUp 主页地址:https://gozhuyinglong.github.io 源码分享:https://github.com/gozhuyinglong/blog-demos ...

  6. 3kb jQuery代码搞定各种树形选择。

    自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * ...

  7. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  8. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...

  9. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

随机推荐

  1. Nginx_安全2

    Nginx与安全有关的配置 隐藏版本号 http {    server_tokens off;} 经常会有针对某个版本的nginx安全漏洞出现,隐藏nginx版本号就成了主要的安全优化手段之一,当然 ...

  2. 2018 ACM-ICPC 宁夏 H.Fight Against Monsters（贪心）

    It is my great honour to introduce myself to you here. My name is Aloysius Benjy Cobweb Dartagnan Eg ...

  3. iTOP-4418开发板_重实力_优势突出_有原理图源码开源

    核心板参数 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm PCB层数:6层PCB沉金设计 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 68 ...

  4. [LC] 113. Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  5. OpenCV 使用二维特征点(Features2D)和单映射(Homography)寻找已知物体

    #include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...

  6. Java入门级文件下载_学习笔记

    文件下载和上一篇文件上传很像,就不多说了,传一个我写的一个下载歌曲的代码: 下面是Servlet代码: public class DownLoadServlet extends HttpServlet ...

  7. Qt 延时处理的几种办法

    有些时候,我们需要程序延时一会儿: 这里提供四种方法: 1.多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread:: ...

  8. HHP|HPLC-MS/MS|PMT|PST|de novo|

    生物医学大数据 Protein 应用 人类蛋白质组计划 Gene的存在要依靠在蛋白水平确认基因真实存在. 蛋白质组是确定时间地点的研究单元的蛋白质总体,因为时间.地点和研究单元的相互组合存在多种变化, ...

  9. 应用场景：vue表格撤销删除与保存按钮的显隐

    应用场景:vue表格撤销删除与保存按钮的显隐

  10. 浅谈javascript函数执行过程

    javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...