pc端监听屏幕实现导航固定定位
要点:占位符

js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离 大于 要固定定位开始以下元素的距离,则给要固定元素添加fixed样式。
初始化方法时,要给占位符添加样式
function sortNavInit() {
$(".consultBox").find(".sort-clone").css("height", $(".conditionList").outerHeight(false)); // .conditionList为要固定定位元素的类名
}
$(window).scroll(function () {
var posTop = $(".consultBox").offset().top; //.consultBox元素为从 要 固定定位元素 开始到以下的层的类名
if ($(window).scrollTop() > posTop) {
$(".consultBox").addClass("fixed");
} else {
$(".consultBox").removeClass("fixed");
}
});
pc端监听屏幕实现导航固定定位的更多相关文章
- 滚动条大于120px时,判断pc端的情况下,导航条固定定位
//滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...
- JS 获取和监听屏幕方向变化(portrait / landscape)
移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryL ...
- PostgreSQL数据库服务端监听设置及客户端连接方法教程
众所周知,PostgreSQL 是一个自由的对象-关系数据库服务器(数据库管理系统),是一个可以免费使用的开放源代码数据库系统.本文详细介绍了PostgreSQL数据库服务端监听设置及客户端连接方法, ...
- Android 监听屏幕锁屏,用户解锁
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
- Socket(TCP)客户端请求和服务端监听和链接基础(附例子)
一:基础知识回顾 一: Socket 类 实现 Berkeley 套接字接口. Socket(AddressFamily, SocketType,ProtocolType) 使用指定的地址族.套接字类 ...
- Android监听屏幕解锁和判断屏幕状态
开发后台服务的时候经常需要对屏幕状态进行判断,如果是想要监听屏幕解锁事件,可以在配置里面注册action为 android.intent.action.USER_PRESENT的广播,则可以监听解锁事 ...
- Android 监听屏幕锁屏&用户解锁
在做视频播放器的时候,遇到一个问题,在用户播放视频然后锁屏之后,视频播放器仍然在继续播放,遇到类似手机系统状态改变的问题的时候,首先想到了广播,下面做个总结: public class ScreenL ...
- 全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
- [Swift通天遁地]三、手势与图表-(1)监听屏幕上触摸事件的各种状态
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- js ctrl+v实现图片粘贴
<script> // demo 程序将粘贴事件绑定到 document 上 document.addEventListener("paste", function ( ...
- MvcPager帮助文档 - MvcAjaxOptions 类
表示用于 MvcPager 在 Ajax 分页模式下的选项设置,该类继承自 AjaxOptions. 公共属性: 名称 说明 默认值 AllowCache 获取或设置一个值,该值指示是否在Ajax分页 ...
- smartconfig配置模式
http://www.tuicool.com/articles/E3a2myi 这项技术由德州仪器提出, 并且应用在自己的CC3000系列芯片上. 不过, 从原理上来说, 支持混杂模式的wifi芯片都 ...
- Atitit.linux 内核 新特性 新功能
Atitit.linux 内核 新特性 新功能 1. Linux 3.2内核新特性 2012-02-12 22:41:471 1.1. EXT4:支持更大的块2 1.2. BTRFS:更快的数据清理 ...
- altera tcl
例子:https://www.altera.com/support/support-resources/design-examples/intellectual-property/embedded/n ...
- jquery的param()
jQuery ajax - param() 方法 jQuery Ajax 参考手册 实例 序列化一个 key/value 对象: var params = { width:1900, height:1 ...
- nginx的luajit安装luarocks并安装luafilesystem
nginx的luajit安装luarocks并安装luafilesystem by admin on -- :: in , 69次 标题有点绕口.我尽量把关键词都贴进去.之前因为自己的nginx安装了 ...
- linux mysql 5.7.17 编译安装小记
官方网站中下载源码包: https://dev.mysql.com/downloads/mysql/ 选择下载源码包: 由于官网下载较慢,我选择使用搜狐镜像站进项下载..速度真的快的不是一星半点: 电 ...
- linq基础,正则表达式,.net相关
声明扩展方法的步骤:类必须是static,方法是static,第一个参数是被扩展的对象,前面标注this.使用扩展方法的时候必须保证扩展方法类已经在当前代码中using. LINQ:将int数组中大 ...
- Log4E插件使用记录
在Java编程中,为了调试使用一大堆的System.out.println()或者是System.err.println查看程序的执行,最后由于懒得注释导致发布正式版时需要遍历并注释.而大量的Syst ...