直接上代码,本例采用了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. Winform 委托窗体传值

    有窗体Form1和窗体Form2,单击Form1按钮弹出Form2,单击Form2吧Form2的textBox控件文本传给Form1的label控件. 窗体1里: 实例化Form2,注册Form2的事 ...

  2. 网络同步带来的bug

    说一下之前遇到的bug,首先贴点代码 public class TcpSession : ITcpSession { private Socket _appSession; private AutoR ...

  3. Using Redis to store php session

    Using Redis to store php session 默认情况下,php将会将session信息存储在文件系统上,在单机情况下没有问题,但是当系统负载增大,或者在对系统可用性要求很高的场景 ...

  4. MFC控件的SubclassDlgItem

    MFC控件的SubclassDlgItem 要在程序中创建新设计的控件,显然不能用自动创建的办法,因为对话框模板对新控件的特性一无所知.程序可以用手工方法创建控件,在调用派生类的Create函数时,派 ...

  5. nginx的初步了解

    今天学习了nginx.nginx不但可以作为服务器,类似于IIS,也可以作为反向代理.它有一个配置文件nginx.conf,在这个文件里配置了一些重要的参数,通过修改这些参数,然后启动nginx,就可 ...

  6. Python—变量

    1.在Python中,变量名类似__xxx__的,也就是以双下划线开头,并且以双下划线结尾的,是特殊变量,特殊变量是可以直接访问的,不是private变量 2.访问限制: class内部属性可以被外部 ...

  7. c++的默认构造函数 VS 深拷贝(值拷贝) 与 浅拷贝(位拷贝)

    C++默认为类生成了四个缺省函数: A(void); // 缺省的无参数构造函数 A(const A &a); // 缺省的拷贝构造函数 ~A(void); // 缺省的析构函数 A & ...

  8. jq 部分用法

    这几天一直在写前台,因为jq是在客服端处理数据的,所以公司,一般都用这种方法,下面是我这几天用到的一些东西 1.修改table表格的第一轮显示值 function changeTableRowValu ...

  9. Tomcat中间件URL中文字符传递问题

    1. 问题描述: tomcat中如果URL中需要传递中文参数,需要配置tomcat的service.xml中文传递的编码方式,否则中文传递将出现乱码,导致程序异常. 2. 解决方式: 修改tomcat ...

  10. 【转】 教大家防止Jar包被反编译

    http://blog.csdn.net/zhengjingle/article/details/50833746 在需要放置编译的java类中加一个无用的class,然后再把class的名字修改了, ...