直接上代码,本例采用了jQuery来进行介绍

CSS部分:

.sticky {
position: fixed;
top: 0;
}

  

JS部分:

var stickyBar = $('.sticky-bar');
var stickyLine = stickyBar.offset().top;
function toggleSticky(e) {
window.scrollY > stickyLine ? stickyBar.addClass('sticky') : stickyBar.removeClass('sticky');
}
$(document).on('scroll', toggleSticky);

一种模拟position: sticky;的方法的更多相关文章

  1. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  2. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  3. 在C#中模拟Javascript的setTimeout方法

    在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...

  4. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  5. python模拟登陆豆瓣——简单方法

    学爬虫有一段时间了,前面没有总结又重装了系统,导致之前的代码和思考都没了..所以还是要及时整理总结备份.下面记录我模拟登陆豆瓣的方法,方法一登上了豆瓣,方法二重定向到了豆瓣中“我的喜欢”列表,获取了第 ...

  6. css3 position:sticky

    最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取 ...

  7. css position:sticky的尝试

    前言 sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置 ...

  8. position: sticky 防坑指南

    position: sticky 防坑指南:https://www.jianshu.com/p/e217905e8b87 今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定, ...

  9. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

随机推荐

  1. 路由器TL-WR941N V5.1:救砖、MOD

    完成效果图: --- 拆芯片时需要贴上胶带,防止误伤: --- 堆锡拆除旧的flash芯片: --- 购入物品: --- 编程器刷入Breed: --- Web刷机: --- 预处理材料: --- 7 ...

  2. Office 365系列六 ------ 创建sharepoint online网站

    这节跟大家介绍简单的创建sharep online私有网站集,sharepoint online 可以给我们提供开箱即用的功能,比如文档库:可以给我们取代File Server,提供了版本管理,版本变 ...

  3. eclipse导入PIL报错

    有些模块,比如PIL,已经装入过,但是在pydev中无法自动提示,甚至有报 unresolved import的问题,虽然不会引起运行时问题,但是无法实现自动提示,还是一件很麻烦的事情. 下面有个解决 ...

  4. jquery radio

    取radio的值: JS代码 $("input[name='radioName'][checked]").val(); 给radio 赋值, 选中值为2的radio: JS代码 $ ...

  5. sed 命令使用

    ios 的sed 命令 跟linux  sed 命令有区别 # 所有的a 替换成b sed -i "" 's/a/b/g' #删除掉所有包含a的行 sed -i "/a/ ...

  6. 关于$.fn.*的使用

    这个案例是我封装了一个树形插件,也是别人写好的,但是对于我来说调用起来不是很方便,就对他的初始化方法又进行了一次封装,总的来说显得比较麻烦,不过我是新手嘛 DEMO 封装一个jcTree的方法$.fn ...

  7. java序列化深拷贝

    java深拷贝 序列化和反序列化合成在一起的方法CloneUtils import java.io.ByteArrayInputStream; import java.io.ByteArrayOutp ...

  8. openstack快速封装镜像

    本来是该写对接ceph的,但是临时有事了,必须先弄镜像,因此提前写这个了,我个人不是按官网来封装镜像的,是按自己的习惯,所以觉得信不过的可以用官网的方式,有兴趣的可以看看都知道,openstack创建 ...

  9. nginx + lua + redis 防黑IP

    lua脚本 local redis = require "resty.redis" local red = redis.new() red.connect(red, '127.0. ...

  10. C# Winform学习---MDI窗体的设计,PictureBox控件(图片上一页下一页),Timer控件,MenuStrip控件

    一.MDI窗体的设计 1.MDI简介 MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows 2.0下 ...