页面滚动tab监听
页面 需求,顶部固定,左侧固定,右侧内容滚动
所以给右侧内容高度,内容里面滚动
(使用固定定位的话,右侧内容总会给head部分遮挡,比较坑)

1.左侧是侧边栏,点击li,右侧内容显示当前
右侧内容滚动,当滚动到当前位置后,侧边栏当前 高亮

js 代码
var _lis = $(".sliderbar li");
var _list = $(".con_scroll .item"),
_lilen = _lis.length-;
$(".con_definition").on('scroll',function(){
var scrollTop = $(window).scrollTop()+_head+,
len = _lilen;
for (; len > -; len--) {
var that = _list.eq(len);
if (scrollTop >= that.offset().top) {
_lis.removeClass('cur').eq(len).addClass('cur');
break;
}
}
})
页面滚动tab监听的更多相关文章
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听
在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...
- jquery 页面滚动tab自动定位,tab与内容对应
直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...
- 问题记录:JavaFx 鼠标滑轮滚动事件监听!
问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...
- scrollview中停止滚动的监听
[补充]可以在主线程控制,特别注意 scrollView3.postDelayed(new Runnable() { @Override public void run() { scrollView3 ...
- vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息
可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...
- 关闭浏览器或者关闭使用window.open打开的页面时添加监听事件
最近工作中有个需求:点击按钮时打开一个页面,此处取名为page1,打开页面的前提条件是如果有人已经打开过page1页面并且没有关闭时请求ajax判断session是否为空,如果为空则将用户名和文档id ...
- amazeui tab 监听当前选项
$('#contenttab').find('a').on('opened.tabs.amui', function(e) { if(e.target.pathname.indexOf("[ ...
随机推荐
- AC日记——最小路径覆盖问题 洛谷 P2764
题目描述 «问题描述: 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V 中每个顶点恰好在P 的一条路上,则称P是G 的一个路径覆盖.P 中路径可以从V 的任何一个顶点开 ...
- React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...
- js中cookie、sessionStorage、localStorage
一.cookie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 推荐一款基于 AI 开发的 IDE 插件,帮助提升编码效率
最近在浏览技术社区的时候,发现了一款神奇 IDE 插件,官网称可以利用 AI 帮助程序员写代码,一下子吸引了我的好奇心.赶紧下载下来使用一番,感觉确实蛮神奇,可以火速提升编程效率. 这款插件叫做 ai ...
- 树(弱化版)(lca)
3306: 树 时间限制: 10 Sec 内存限制: 256 MB 题目描述 给定一棵大小为 n 的有根点权树,支持以下操作: • 换根 • 修改点权 • 查询子树最小值 输入 第一行 ...
- vcl.Forms等与VCL界面有关的单元不支持跨平台
vcl.Forms等与VCL界面有关的单元不支持跨平台 midaslib也不支持
- GCD CoreData 简化CoreData操作(转)
来自会员带睡帽的青蛙的分享: 短话长说,开始写这个小工具到现在有两个月了,虽然东西少,但是很精练,改了又改,期间有不少问题 在坛子里获得了不少帮助 谢谢各位大大. 就是两个文件一个类 CoreData ...
- Android自定义xml解析
<?xml version="1.0" encoding="utf-8"?> <resources> <Users> < ...
- extern “C”的使用
2016-12-11 22:40:48 VS编译的时候,可以指定编译为C代码或者C++代码.c/c++->高级.而当你新建一个cpp文件时,VS很有可能自动会把编译方式由C变成C++编译.然 ...
- 启动eclipse时出现“Failed to load the JNI shared library jvm.dll”错误及解决-及eclipse版本查看
启动eclipse时出现“Failed to load the JNI shared library jvm.dll”错误及解决-及eclipse版本查看 学习了:https://www.cnblog ...