一、HTML布局

首先写HTML布局

<body>

<div id="wrap"></div>

</body>

二、CSS样式

给点简单的样式

    <style>

    *{

          margin: 0;

          padding: 0;

      }

    body{

        height: 2000px;

        background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%);

    }

    #wrap{

        background-color: rgba(0,0,0,0.2);

        width: 100%;

        height: 100px;

        margin-top: 100px;

    }

    #wrap[data-fixed="fixed"]{

        position: fixed;

        top:0;

        left: 0;

        margin: 0;

    }

    </style>

三、JS代码

1、面向过程

直接编写5行代码搞定

<script>

    var obj = document.getElementById("wrap");

    var ot = obj.offsetTop;

    document.onscroll = function () {

        var st = document.body.scrollTop || document.documentElement.scrollTop;

        obj.setAttribute("data-fixed",st >= ot?"fixed":"")}

</script>

2、面向对象

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

封装方法

/*

 * 封装吸顶函数，需结合css实现。

 * 也可以直接用js改变样式，可以自行修改。

 */

    function ceiling(obj) {

        var ot = obj.offsetTop;

        document.onscroll = function () {

            var st = document.body.scrollTop || document.documentElement.scrollTop;

            /*

             * 在这里我给obj添加一个自定义属性。className可能会影响原有的class

             * 三元运算使代码更简洁

             */

            obj.setAttribute("data-fixed",st >= ot?"fixed":"");

        }

    }

调用方法

<script src="ceiling.js"></script>

<script>

    window.onload = function () {

         /*获取导航对象*/

        var wrap = document.getElementById("wrap");

        ceiling(wrap) /*调用吸顶函数  */

    };

</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. ORs-4-Enhanced Role of OR Gene Loss (Pseudogenization) in Birds

    Enhanced Role of OR Gene Loss (Pseudogenization) in Birds 1.因为文献已经证明(a)基因缺失和得到对于进化有影响,(b)大的基因家族对进化影响 ...

  2. ABC：Meaningful Mean

    题目描述 You are given an integer sequence of length N, a= {a1,a2,…,aN}, and an integer K. a has N(N+1)⁄ ...

  3. yet|women teachers|waters|

    Though the sore be healed,  a scar may remain on her face, which makes her sad sometimes. 题目解析 考查连词的 ...

  4. Kintinuous解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. Kintinuous是Thomas Whelan在National University of Ireland Maynooth读博期间的工作,有 ...

  5. xml_class来自 phpcms

    <?php class xml{ var $parser; var $document; var $stack; var $data; var $last_opened_tag; var $is ...

  6. smarty应用1 之 模板进行数学运算，保留小数位数

    例子1 乘法除法运算: 1格式:{$number|number_format} 保留小数点后2位小数. {$v/$total*100|string_format:"%0.2f"|c ...

  7. Jsp入门EL表达式_学习笔记

    1.EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > ...

  8. 转载——Python Selenium 常用方法总结

    selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标 方法:l ...

  9. labview学习——生产者/消费者（数据）（事件）

    其主要的模型: 主要从以下几个方面理解: 1.可重入性 正常的labview是多线程设计语言,而我们在执行VI时的规则是通过VI的命名来分别调用实现的. 打开VI的Highlight调试工具,可以看出 ...

  10. [LC] 17. Letter Combinations of a Phone Number

    Given a string containing digits from 2-9 inclusive, return all possible letter combinations that th ...