一、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. FastJson禁用循环引用检测

    我们先来看一个例子: package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java ...

  2. 吴裕雄--天生自然C语言开发：enum(枚举)

    enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; en ...

  3. Linux/UNIX 上安装 MySQL

    Linux/UNIX 上安装 MySQL Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址: MySQL - MySQL服务器.你需要该选项,除非你只想连 ...

  4. 微信中的APP、公众号、小程序的openid及unionid介绍

    微信中的APP.公众号.小程序的openid及unionid介绍 1.unionid 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只 ...

  5. spring cloud关于feign client的调用对象列表参数、设置header参数、多环境动态参数试配

    spring cloud关于feign client的调用 1.有些场景接口参数需要传对象列表参数 2.有些场景接口设置设置权限等约定header参数 3.有些场景虽然用的是feign调用,但并不会走 ...

  6. python通过ssh读写远程数据

    1.适用场景 需要读取(写)多台远程机器下的一个或多个文件,如果要通过 os.system('scp ......')来完成就必须配置免密登陆,比较麻烦 2.准备工作, 安装依赖 pip instal ...

  7. 1.redis安装配置

    Redis 1.Redis安装: 说明: 1.也是一种类似于Memcached的kev-value机制的存储服务 2.是非关系型数据库(NoSQL)的一种. 3.官网:www.redis.io,中文网 ...

  8. android手机卫士、3D指南针、动画精选、仿bilibli客户端、身份证银行卡识别等源码

    Android精选源码 android身份证.银行卡号扫描源码 android仿bilibili客户端 android一款3D 指南针 源码 android手机卫士app源码 android提醒应用, ...

  9. C语言中传值和C++的传引用

    在C语言中,传址其实也时传值的一种,首先地址其实也时可以看做是一个值来进行传递的. 在C++中有一种说法叫传引用,就是&变量名. 比如: /* * 传值 int a = 3; void fun ...

  10. 85）PHP，PHP处理mysql的函数种类

    首先,就我知道的,一共有三种: 自己用过的是mysql和mysqli,还没用过PDO_mysql 有时,随着我们的各种东西版本的更新,会遇到某一个扩展用不了的情形,所以,就有了编写完成相同功能的使用不 ...