直接上代码,本例采用了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. NDO to PNP( ndoutils to PNP4Nagios)

    How to use this script The aim of this script is to import your ndo database directly into PNP4nagio ...

  2. PRML

    PRML 学习之 第一章 介绍 Introduction #欢迎共同学习和讨论,由于本文将不断修改,谢绝转载 模式识别问题具有重要且久远的历史.比如,16世纪开普勒发现行星运动定律,又如20世纪出发现 ...

  3. django框架的models

    在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...

  4. redis geo 初探

    redis的geo搜索功能是3.2之后新增的,所以实验开始之前先查看redis的版本,确保版本正确. redis的geo多用于地理类应用,所以这次还是用了高德地图API来用作数据源. 首先截取几个点: ...

  5. CentOS 7 安装php开发环境

    安装服务 : yum install httpd httpd-devel  service httpd start 启动     安装mariadb : yum -y install mariadb* ...

  6. 初学c# -- 学习笔记(四)

    想想,数据库先用mysql了,这玩意小且安装方便.前面web学了些,现在学winform的.数据库先看看便捷的mysql. 下载了一个mysql5.7版的,装上居然找不到密码,重装3.4回,找不到,说 ...

  7. Android 4.0 源代码结构

    Android源码的第一级目录结构   Android/abi (abi相关代码.ABI:application binary interface,应用程序二进制接口)   Android/bioni ...

  8. 简单的html和css

    整体图太大了,看不太清楚,下面是分开的图 第一张: 第二张:

  9. JAVA异常初步

    1,1个图.Throwable是所有异常类的老祖宗,万恶之源.Error正常是系统级错误,控制不了,Exception类又分RuntimeException及别的异常,RuntimeException ...

  10. 点击更多button显示更多数据的功能实现思路代码

    此功能是根据自己思路去慢慢做出来的,做的不够专业,希望有懂这个的前辈给自己指点指点. //分界线———————————————————————————————————————————————————— ...