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. ...
随机推荐
- linux 单机跨进程通信
一般来说通过网络通信(比如tcp,udp)或者共享内存的方式肯定可以实现跨进程通信,但现在这里要说的是比较偏但实用的几个方法:利用unix域通信(普通网络连接),利用unix域通信(socketpai ...
- Jenkins插件开发资料
原文地址:http://www.ciandcd.com/?p=181 Jenkins plugin 开发: Document http://hudson-ci.org/docs/index.html ...
- PyCharm 环境配置
1.去掉“自动保存功能” pycharm默认是自动保存的,习惯自己按 ctrl + s 的可以进行如下设置: 菜单File -> Settings... -> Appearance &am ...
- C++语言基础(11)-多态
一.产生背景 先看下面的例子: #include <iostream> using namespace std; //基类People class People{ public: Peop ...
- int 与 string::length()
今天在代码中遇到这样的问题 ; while (nStart < strTemp.length()) { ... } 感觉自己写的逻辑没有错误,但是,代码执行结果就是不对,结果单步调试到该处发现, ...
- 使用Crypto++库的CBC模式实现加密
//***************************************************************************** //@File Name : scsae ...
- Ubuntu安装Sun JDK
Ubuntu 14.04 下安装 Sun JDK 1.8.0 1.下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8- ...
- 我的第7个java程序--把java web项目改为java project项目--mybatis
连接数据库需要 程序,连接字符串,查询语句 主程序->读取连接字符串->读取查询语句->把查询到的值赋值给映射对象->打印对象属性 java project的好处,不用做那么多 ...
- Web Services 概要
WSDL WSDL 是基于 XML 的用来描述 Web services 以及如何访问它们的一种语言. WSDL 可描述 web service,连同用于 web service 的消息格式和协议的细 ...
- 集合Set映射一对多(使用xml文件)
如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...