直接上代码,本例采用了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. fastcgi 性能初配 504 gateway time-out

    情况一:由于nginx默认的fastcgi进程响应缓冲区太小造成 这种情况下导致fastcgi进程被挂起,如果fastcgi服务队这个挂起处理不是很好的话,就可能提示"504 Gateway ...

  2. JS中this的指向问题&使用call或apply模拟new

    this的指向由调用时决定而不是定义时决定,定义的方式: //直接定义在函数里 var a="window中的a"; var name="window"; fu ...

  3. Eclipse设置、调优、使用(转自)

    转自http://yuanzhifei89.iteye.com/blog/974082 eclipse调优 一般在不对eclipse进行相关设置的时候,使用eclipse总是会觉得启动好慢,用起来好卡 ...

  4. UGUI&&Animator模块知识点随记

    1.Render Texture,把这个赋给摄像机,这个对象就保存了摄像机拍摄到的纹理,再把他赋给Raw Image. 2.给Button添加事件关联时,函数不能带有yield WaitForSeco ...

  5. 详解收发不畅原因及U-Mail邮件中继解决之道

    邮件在商务往来中扮演着信息交流的重要角色,假如传输受阻,必将造成沟通不畅:可能三五封邮件的投递你意识不到其重要性,但假如长期需和客户保持沟 通,则需要保证其一贯的稳定性,这就很考验相关软件平台的性能是 ...

  6. DIOCP之编写第一个应用程序(二)

    构建client界面: 构建界面要比写代码更难爱,不是专业UI设计太丑,先有个界面,好写代码,客户端代码与界面设计思想:界面与数据之间分离处理,不能要接收数据的地方写代码,不然以后修改程序会死人的.

  7. MySQL 数据库常用命令

    1.MySQL常用命令 create database name; 创建数据库 use databasename; 选择数据库 drop database name 直接删除数据库,不提醒 show ...

  8. Window Server 2012 R2 下 IE11 浏览器 无法安装Flash 怎么解决

    不知道是不是我这个的系统的问题,不仅仅是图片有问题,Flash也有问题.用IE打开页面,一直提示安装,简直不胜其烦.尽管我有下载很多浏览器,但习惯了IE,所以也没想用其他浏览器代替IE. 刚开始我是点 ...

  9. easyui 使用问题积累

    一.<a>标签中onclick和javascript事件与grid的select事件执行的先后顺序 html: <a href='javascript:func();' onclic ...

  10. NopCommerce 框架系列(二)

    这一篇,让我们一起来认识一下 NopCommerce 的整体目录结构