5行js代码搞定导航吸顶效果
一、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代码搞定导航吸顶效果的更多相关文章
- 180行ruby代码搞定游戏2048
最今在玩2048这款小游戏,游戏逻辑简单,很适合我这样的对于游戏新入行的人来实现逻辑.于是选择了最拿手的ruby语言来实现这款小游戏的主要逻辑.还是挺简单的,加起来4小时左右搞定. 上代码: requ ...
- 200行Java代码搞定计算器程序
发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示 ...
- 几行JavaScript代码搞定Iframe 自动适应
场景:Iframe嵌入flash,希望flash能随着页面的resize而resize. 主要代码: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- 【备忘】windows环境下20行php代码搞定音频裁剪
先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...
- 80行Python代码搞定全国区划代码
微信搜索:码农StayUp 主页地址:https://gozhuyinglong.github.io 源码分享:https://github.com/gozhuyinglong/blog-demos ...
- 3kb jQuery代码搞定各种树形选择。
自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果
8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...
- 10行代码搞定移动web端自定义tap事件
发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...
随机推荐
- 24）PHP，数据库的基本知识
(1)数据库操作的基本流程: • 建立连接(认证身份) • 客户端向服务器端发送sql命令 • 服务器端执行命令,并返回执行的结果 • 客户端接收结果(并显示) • 断开连接 (2)php中操作数据库 ...
- JS创建数组的三种方法
1 常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...
- as和强制类型转换的区别
之前一直以为as就是强制类型转换,只是as是AS3中新的语法,之前用在有继承关系的对象之间的转换也无甚区别,但是今天却让我领悟到了它俩之间的区别. 原起:今天要给ColorPicker控件动态赋值,它 ...
- LeetCode No.67,68,69
No.67 AddBinary 二进制求和 题目 给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 输入: a = "11", ...
- vue项目中net::ERR_CONNECTION_TIMED_OUT错误
我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...
- cs231n spring 2017 lecture16 Adversarial Examples and Adversarial Training
(没太听明白,以后再听) 1. 如何欺骗神经网络? 这部分研究最开始是想探究神经网络到底是如何工作的.结果人们意外的发现,可以只改变原图一点点,人眼根本看不出变化,但是神经网络会给出完全不同的答案.比 ...
- 关于虚拟机VMware Tools安装中出现的无法自动安装VMCI驱动程序的问题
问题 解决方法 根据配置文件信息找到所在的虚拟机位置 找到后缀名为vmx的文件,右键打开方式中选择使用记事本打开 选择左上角编辑中的查找功能输入图中的查找内容后,点击查找下一个 将其原先的TRUE值改 ...
- Memcached的批量删除方案总结
Memcached的批量删除,向来是Memcached使用者很头疼的事情,因为Memcached采取的缓存方案是哈希表结构,所以没有办法实现delete from tablename where ke ...
- Redis学习之热点key重建
在Redis的生产环境中,大量客户端连接请求某一个key,但都需要从DB中获取数据,来回写数据库,如下图: <ignore_js_op> 造成的问题: 大量的线程请求数据库,造成数据库压力 ...
- JAVA异常处理原则和log4j输出详细异常分析
1.多用try,catch;不要一个try,catch包含所有内容 好处:不同模块抓取不同异常,某一模块异常挂了,不影响其他模块的程序的进行 2.多写几个catche:尽量不要使用Exception这 ...