直接上代码,本例采用了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. Angular JS中$timeout的用法及其与window.setTimeout的区别

    $timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...

  2. win7系统部分便笺的元数据已被损坏怎么恢复

    解决Windows7系统打开便笺:部分便笺的元数据已被损坏,便笺已将其恢复为默认值.这个问题! Windows7下有一部分系统打开便笺就会报出以下情况 其实这个方法很好解决! 我们需要重新注册一下下面 ...

  3. X-Frame-Options 响应头

    [X-Frame-Options 响应头] 参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

  4. [VM workstation]VM workstation 中的虚拟机连不上网络

    之前一直没有想到虚拟机连不上网络是VM workstationg 自身的原因. 突然在进入虚拟机时看见提示:VM 桥接网桥无法正常工作 于是便进入 编辑→虚拟网络编辑器 中将虚拟网卡都重置了一下就可以 ...

  5. VPN服务器是什么?

    可能很多人听到VPN的第一感觉是它是一个FQ的工具,然而并不是酱紫的. 虚拟专用网(Virtual Private Network,简称VPN),是一种常用于连接中.大型企业或团体与团体间的私人网络的 ...

  6. 对dijkstra算法的自我理解,c#例子

    dijkstra该算法主要应用在求解最短路径,从最近点开始,广度搜索. 假设有向图中有10个顶点,求其中某个顶点a到其它顶点的最短路径..满足贪心算法的2个标准.时间复杂度为O(N2) 此问题可以进行 ...

  7. Versioned table in Netezza

    Problem One QC process need to obtain tables and their row counts in a database in Netezza. We use t ...

  8. 通过系统自带的内容提供器(ContentResolver)读取系统的通讯录,并设置点击事件

    1.布局 主布局只有一个listview,用来显示电话簿的名字和手机号码 <?xml version="1.0" encoding="utf-8"?> ...

  9. python打印服务器所有进程

    #有时候我们需要查看服务器上所有进程,来判断哪些进程是否已经称为僵尸进程#!/usr/local/bin/python3.5 import psutil for i in psutil.pids(): ...

  10. 禁止复制放在js文件中

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码代码如下: <script language="Javascript"> document.oncont ...