5行js代码搞定导航吸顶效果

gaosboy 发布于2019-08-22 10:54 / 1631人阅读

摘要：一布局首先写布局二样式给点简单的样式三代码面向过程直接编写行代码搞定面向对象改进，封装成吸顶函数方便以后直接，封装方法封装吸顶函数，需结合实现。

一、HTML布局

首先写HTML布局

二、CSS样式

给点简单的样式

三、JS代码 1、面向过程

直接编写5行代码搞定

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":"");
        }
    }

调用方法

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

云服务器 GPU云服务器 js导航栏代码导航栏tab切换效果导航菜单代码 html 导航代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91424.html

5行js代码搞定导航吸顶效果

摘要：一布局首先写布局二样式给点简单的样式三代码面向过程直接编写行代码搞定面向对象改进，封装成吸顶函数方便以后直接，封装方法封装吸顶函数，需结合实现。一、HTML布局首先写HTML布局二、CSS样式给点简单的样式 *{ margin: 0; padding: 0; } body{ he...

Zhuxy 2019-08-01 17:26 评论0 收藏0
5行js代码搞定导航吸顶效果

摘要：一布局首先写布局二样式给点简单的样式三代码面向过程直接编写行代码搞定面向对象改进，封装成吸顶函数方便以后直接，封装方法封装吸顶函数，需结合实现。一、HTML布局首先写HTML布局二、CSS样式给点简单的样式 *{ margin: 0; padding: 0; } body{ he...

KitorinZero 2019-08-29 13:11 评论0 收藏0
踩坑日记(持续更新...)

摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染语法{{}}冲突，使用v-text v-html渲染可以写表达式的写法字符+变量 2，函数防抖节流封装实用的下拉加载更多代码demo...

taoszu 2019-08-22 15:00 评论0 收藏0
纯css实现手机通讯录

摘要：不过要是一个简单的小项目，没那么多要求的话，纯还是能很好的适用的，性能上绝对要比通过滚动监听强上好多倍，而且引用方便，只要数据生成了就可以直接使用我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶快速定位下...

王晗 2019-08-29 16:59 评论0 收藏0
纯css实现手机通讯录

摘要：不过要是一个简单的小项目，没那么多要求的话，纯还是能很好的适用的，性能上绝对要比通过滚动监听强上好多倍，而且引用方便，只要数据生成了就可以直接使用我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶快速定位下...

苏丹 2019-08-02 11:44 评论0 收藏0