一种模拟position: sticky;的方法
直接上代码,本例采用了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;的方法的更多相关文章
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- 在C#中模拟Javascript的setTimeout方法
在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- python模拟登陆豆瓣——简单方法
学爬虫有一段时间了,前面没有总结又重装了系统,导致之前的代码和思考都没了..所以还是要及时整理总结备份.下面记录我模拟登陆豆瓣的方法,方法一登上了豆瓣,方法二重定向到了豆瓣中“我的喜欢”列表,获取了第 ...
- css3 position:sticky
最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取 ...
- css position:sticky的尝试
前言 sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置 ...
- position: sticky 防坑指南
position: sticky 防坑指南:https://www.jianshu.com/p/e217905e8b87 今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定, ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
随机推荐
- EntityFrameWork 使用时碰到的小问题
EntityFrameWork 使用时碰到的小问题 1,在使用orm访问数据库的相目里,也要引用EntityFrameWork.dll,否则无法使用orm 否则,编译错误 错误 5 "Sys ...
- {POJ}{3903}{Stock Exchange}{nlogn 最长上升子序列}
题意:求最长上升子序列,n=100000 思路:O(N^2)铁定超时啊....利用贪心的思想去找答案.利用栈,每次输入数据检查栈,二分查找替换掉最小比他大的数据,这样得到的栈就是更优的.这个题目确实不 ...
- CSS基础01
1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...
- Google V8编程详解(序)Cloud App
此系列文章转载于此http://blog.csdn.net/feiyinzilgd/article/details/8247723 应用程序发展到今天,应用程序的概念也在不断地发生着 ...
- [专题论文阅读]【分布式DNN训练系统】 FireCaffe
FireCaffe Forrest N. Iandola FireCaffe: near-linear acceleration of deep neural network training on ...
- 使用hex6x 进行十六进制转换
接触DSP两年多,虽然烧写Flash的操作都没问题,但是要是问起来为什么这么做的,就有点自惭形秽了.所以花些时间,查阅一下资料,整理一下. 1.先看看BurnFlash都需要什么东西. XXX.out ...
- 谈谈springMVC和Strut2的理解
关于struts2框架原理 执行流程 struts2框架的核心是一个过滤器,我们编写的action类都继承ActionSupport的接口(顶层是一个过滤器filter),用户发送请求,经过核心过滤器 ...
- Action中获取servletAPI对象的方法
1.ServletActionContext:可以从中获取当前Action对象需要的一切ServletAPI的相关对象: 常用的方法: 1.获取HttpServletRequest:ServletAc ...
- 清空表数据 mysql让主键从1开始
TRUNCATE TABLE name 删除表中的所有行,而不记录单个行删除操作.
- b/s结构的物业管理系统(一)-------登录篇
最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习 ---前端登录页面------ 这个页面的输入框组用的bootstrap的,我设置了几张背 ...