直接上代码,本例采用了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. Native wifi API使用

    写于博客园,自己迁过来: 一.WlanOpenHandle打开一个客户端句柄 DWORD WINAPI WlanOpenHandle( __in DWORD dwClientVersion, __re ...

  2. 自定义Java集合

    一.泛型 1.在JDK1.4以前,所有的集合元素全都按照Object来存储,拿出来还要进行强制转型.由于这样的做法有太多的缺点,容易出现ClassCaseException,不安全,让人不省心,于是乎 ...

  3. Struts2 有关于无法正常的使用通配符

    今天使用struts 2.3.4版本,做了一个通配符的小测试,结果其他的Action都能正常的使用,但是使用通配符的Action不能正常的使用.网上找了很久,最后发现,貌似strust2.3版本以上的 ...

  4. JS实现的随机显示图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. linux 软件的安装与Tarball

    Linux 系统上真正认识的可执行文件其实是二进制文件 ( binary program ) shell scripts 只是利用 shell (例如 bash) 这支程序的功能进行一些判断式,而最终 ...

  6. Volley简单封装

    public interface IRequest { /** * 获取头部信息 * * @return */ public Map<String, String> getHeaderMa ...

  7. JMeter - 参数化

    方法一:使用"函数助手"添加从文件中读取参数的函数 (a)__StringFromFile函数:[读取整行数据]1.新建参数文件:

  8. 为何PHP插入mysql的中文是乱码?【坑】

    依然没有找到最终的解决方法,PHP插入的中文在phpmyadmin中看是乱码,但是用PHP获取之后显示正常: 可以在phpmyadmin中直接插入中文,在PHPmyadmin中显示正常,用PHP获取中 ...

  9. javascript一些方法兼容

    javascript一些方法兼容 标签(空格分隔): javascript 方法收集 [TOC] Object.keys 参考地址 if (!Object.keys) Object.keys = fu ...

  10. 第六章 springboot + 事务(转载)

    本篇博客转发自:http://www.cnblogs.com/java-zhao/p/5350106.html 在实际开发中,其实很少会用到事务,一般情况下事务用的比较多的是在金钱计算方面. myba ...