一、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. android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码

    Android精选源码 灵活的ShadowView,可替代CardView使用 基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器 新闻应用项目采用了 ...

  2. [USACO09DEC]雪橇Bobsledding（贪心）

    https://www.luogu.org/problem/P2968 题目描述 Bessie has entered a bobsled competition because she hopes ...

  3. LeetCode No.124,125,126

    No.124 MaxPathSum 二叉树中的最大路径和 题目 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定 ...

  4. LeetCode No.115,116,117

    No.115 NumDistinct 不同的子序列 题目 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且 ...

  5. Python语言学习前提：python安装和pycharm安装

    一.Windows系统python安装 1.python官网:https://www.python.org/downloads/ 2.官网首页:点击Downloads > Windows > ...

  6. DAG Optimal Coin Change

    题目描述 In a 10-dollar shop, everything is worthy 10 dollars or less. In order to serve customers more ...

  7. struts.xml中namespace的配置之浏览器兼容性

    还是做练习项目的时候发现一个问题: <span style="font-size:14px;"><package name="default" ...

  8. Redis为什么这么快以及持久化机制

    1.首先我们谈一下为什么Redis快: 一. Redis是纯内存数据库,一般都是简单的存取操作,线程占用的时间很多,时间的花费主要集中在IO上,所以读取速度快. 二. 再说一下IO,Redis使用的是 ...

  9. [LC] 345. Reverse Vowels of a String

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1: In ...

  10. 用C#实现一个百度万年历

    目录 背景 实现步骤 关键点 结束语 背景 命理学是对人生命运规律的探索,以人的各式各样的数字(出生年月日.姓名笔划等)来推测人的性格与命运并占卜推测未来会发生的事情.古今中外都有相关方面的理论,中国 ...