一种模拟position: sticky;的方法

直接上代码,本例采用了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);
时间: 2024-08-09 02:48:49

一种模拟position: sticky;的方法的相关文章

C#三种模拟自动登录和提交POST信息的实现方法

网页自动登录(提交Post内容)的用途很多,如验证身份.程序升级.网络投票等,以下是用C#实现的方法.       网页自动登录和提交POST信息的核心就是分析网页的源代码(HTML),在C#中,可以用来提取网页HTML的组件比较多,常用的用WebBrowser.WebClient.HttpWebRequest这三个.以下就分别用这三种方法来实现:      1.WebBrowser是个"迷你"浏览器,其特点是Post时不用关心Cookie.内置JS等问题       WebBrows

qemu-system和qemu-user两种模式动态模拟运行嵌入式固件方法总结

qemu-system和qemu-user两种模式动态模拟运行嵌入式固件方法总结 前言 搭建嵌入式固件的动态模拟环境的过程中遇到了许多的坑,最终终于搭建了起来,很有必要记录下遇到的问题,避免今后再踩坑. 工具 1.buildroot 下载地址 以buildroot 2019.02.4版本为例,编译mips大端架构环境. tar zxvf buildroot-2019.02.4.tar.gz apt-get install libncurses5-dev make menuconfig Targe

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况.而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本.但是在这里笔者要讲解的是使用CSS完成fixed效果. 千言万语不及实例一个: 以上是笔者在IETester下测试IE6的fixed,注意看滚动条.其中导航采用的是po

JavaScript强化教程——DOM编程(两种控制div移动的方法)

本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--DOM编程(两种控制div移动的方法) 第一种 按钮控制首先 创建两个html按钮和一个div并给div一个样式 input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div i

写出几种IE6 BUG的解决方法

1.双边距BUG float引起的  使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.Ie z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖 使用iframe

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技术", success: function(msg){alert(msg);}, error: function(error){alert(error);} }); JQ serialize()方法取值: $.ajax({ type: "POST&quo

safari下无法模拟click()的解决方法

之前在HTML5 File API — 打开本地图片并预览里提供一种模拟单击file控件的方法,后来发现这种方法在safari下无法使用...之前的旅行笔记和天地图版都是这样,导致safari下点击打开文件按钮不可用,也不提示错误,也不知道是不是这个原因比赛没有入围,唉.... 解决方法很简单,其实不是不能模拟safari,之前<input type="file"/>隐藏用的是display:none,之后改成visibility:hidden,就可以用了!!!我擦. 原因

PHP模拟post提交数据方法汇总

使用php模拟post传值虽然在日常生活中用到的不是很多,但是在某些场合还是经常用到的.下面脚本之家小编给大家整理了三种php模拟post传值的方法,file_get_contents.curl和socket,需要的朋友参考下 第一种:file_get_contents来模拟post <php function file_get_contents_post($url, $post){ $options = array( ‘http‘=> array( ‘method‘=>‘POST‘,

css3 position:sticky

最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取指定位置错误,因为上面都是图片,在图片未加载出来时获取高度,高度值不对,解决办法就是在imgae上加bindload事件,在图片加载加载完成之后再获取高度: bug2:onPageScroll事件会有延迟,导致最终效果会出现卡顿,百度之后知道有一个position:sticky,是一个很有意思的属性