直接上代码,本例采用了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. ConCurrent in Practice小记 (2)

    Java-ConCurrent2.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0 ...

  2. Google V8编程详解(二)HelloWorld

    转自http://blog.csdn.net/feiyinzilgd/article/details/8248448 上一章讲到了V8的编译和安装,这一章开始从一个demo着手. 这里选用了官方文档的 ...

  3. 视频聊天APP

    1 通讯 P2P 1.1 关键字[java udp 打洞] 参考文章 http://www.oschina.net/code/snippet_165555_17279 关键代码 package org ...

  4. MSIL Emit AOP

    参考链接: https://pieterderycke.wordpress.com/tag/reflection-emit/ http://www.moon-soft.com/doc/23252.ht ...

  5. 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介

    引言 今天看到一片热门的博客, .NET高级工程师面试题之SQL篇 ,要求找出每一个系的最高分,并且按系编号,学生编号升序排列.这个查询比较复杂,也比较典型,自从用了ORM后,很久没有写过SQL语句了 ...

  6. 第十章 DOM

    10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...

  7. DIOCP之DEMO-Echo卡死问题分析

    最近很多新朋友在调试echo这个例程时发现,总是卡死客户端或服务器端,这是因为客户端的接收数据用的memo没有处理接受到的行数,导致超过最大行数,而卡死界面,只需要如下操作就可以解决: 引用弦子的:虽 ...

  8. LeetCode 445 Add Two Numbers II

    445-Add Two Numbers II You are given two linked lists representing two non-negative numbers. The mos ...

  9. IT行业果真跳槽快吗?

    近年来IT行业越来越火爆,许多人也开始炒,月入万元不是梦,随随便便拿高薪之类的文章层出不穷,许多的青少年甚至中年人开始关注这块,许多人选择去学习it行业,也朝着月入万元的目标前进,然而,曾几何时,月入 ...

  10. man curl_easy_init(原创)

    curl_easy_init(3) libcurl 手册 curl_easy_init(3) 名字 curl_easy_init - 开始一个简单的libcurl会话 梗概 #include < ...