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

CSS部分:

  1. .sticky {
  2. position: fixed;
  3. top: 0;
  4. }

  

JS部分:

  1. var stickyBar = $('.sticky-bar');
  2. var stickyLine = stickyBar.offset().top;
  3. function toggleSticky(e) {
  4. window.scrollY > stickyLine ? stickyBar.addClass('sticky') : stickyBar.removeClass('sticky');
  5. }
  6. $(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. Gate level Simulation(门级仿真)

    1 什么是后仿真? 后仿真也成为时序仿真,门级仿真,在芯片布局布线后将时序文件SDF反标到网标文件上,针对带有时序信息的网标仿真称为后仿真. 2 后仿真是用来干嘛的? 检查电路中的timing vio ...

  2. Spark-Mllib(一)数据类型

    一.本地向量 有如下几个类: Vector(基类),DenseVector,SparseVector,Vectors(工厂方法,推荐用) 工厂模式是:定义一个用于创建对象的接口,让子类决定实例化哪一个 ...

  3. ArcGIS Engine 刷新问题

    link: http://www.cnblogs.com/Jingkunliu/archive/2013/01/10/2854710.html PartialRefresh方法是部分刷新,效率方面比单 ...

  4. pooling的原理与Python实现

    本文首先阐述pooling所对应的操作,然后分析pooling背后蕴含的一些道理,最后给出pooling的Python实现. 一.pooling所对应的操作 首先从整体上对pooling有一个直观的概 ...

  5. cookie处理

    有时候我们需要验证浏览器中是否存在某个cookie,因为基于真实的cookie 的测试是无法通过白盒和集成测试完成的.webdriver 可以读取.添加和删除cookie信息. webdriver 操 ...

  6. linux RPM、YUM

    Linux 界的两大主流: RPM 与 DPKG distribution 代表 软件管理机制 使用指令 在线升级机制(指令) Red Hat/Fedora RPM rpm, rpmbuild YUM ...

  7. 又一种XML的解析方法

    [Fact(DisplayName="用户名为空")] public void Should_UsernameEmpty() { var paras = new Dictionar ...

  8. 很多事情就像看A片,看的人觉得很爽,做的人未必。

    http://m.jingdianju.com/wzgs/shenghuo/201307185135.html 转载自: 从这个角度上来说,我不太赞成过于关注第一份工作的薪水,更没有必要攀比第一份工作 ...

  9. JS浮点数的加减乘除运算

    文章来源地址:http://blog.csdn.net/lyd518/article/details/7236464 转载请注明出处,尊重作者劳动成果,谢谢!问题这样的: 37.5*5.5=206.0 ...

  10. asp.net web api添加统一异常处理

    1.自定义异常处理过滤器 /// <summary> /// 自定义异常处理过滤器 /// </summary> public class CustomExceptionFil ...