页面 需求,顶部固定,左侧固定,右侧内容滚动

所以给右侧内容高度,内容里面滚动
(使用固定定位的话,右侧内容总会给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监听的更多相关文章

  1. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  2. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  3. app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听

    在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...

  4. jquery 页面滚动tab自动定位,tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  5. 问题记录:JavaFx 鼠标滑轮滚动事件监听!

    问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...

  6. scrollview中停止滚动的监听

    [补充]可以在主线程控制,特别注意 scrollView3.postDelayed(new Runnable() { @Override public void run() { scrollView3 ...

  7. vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息

    可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...

  8. 关闭浏览器或者关闭使用window.open打开的页面时添加监听事件

    最近工作中有个需求:点击按钮时打开一个页面,此处取名为page1,打开页面的前提条件是如果有人已经打开过page1页面并且没有关闭时请求ajax判断session是否为空,如果为空则将用户名和文档id ...

  9. amazeui tab 监听当前选项

    $('#contenttab').find('a').on('opened.tabs.amui', function(e) { if(e.target.pathname.indexOf("[ ...

随机推荐

  1. 【MFC】Button控件和Picture Control的鼠标事件执行顺序

    1.Button控件鼠标事件执行顺序 (1) WM_LBUTTONDOWN (2) WM_LBUTTONUP (3) OnBnClickedButton1(); 2.Picture Control的鼠 ...

  2. WebRTC 介绍 (转)

    google开源了WebRTC项目,网址是:http://code.google.com/p/webrtc/. WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单 ...

  3. 《Linux命令行与shell脚本编程大全 第3版》

    第一部分 Linux 命令行 第1章  初识Linux she1.1   什么是Linux 21.1.1 深入探究Linux 内核 31.1.2 GNU 工具 61.1.3 Linux 桌面环境 81 ...

  4. linux 目标文件调试

    前言如果普通编程不需要了解这些东西,如果想精确控制你的对象文件的格式或者你想查看一下文件对象里的内容以便作出某种判断,刚你可以看一下下面的工具:objdump, nm, ar.当然,本文不可能非常详细 ...

  5. configure: error: C++ preprocessor "/lib/cpp" fails sanity check

    configure: error: C++ preprocessor "/lib/cpp" fails sanity check 参考链接: error: C++ preproce ...

  6. linux命令——ll详解

    一.ll命令 ll并不是linux下一个基本的命令,它实际上是ls -l的一个别名. Ubuntu默认不支持命令ll,必须用 ls -l,这样使用起来不是很方便. 如果要使用此命令,可以作如下修改:打 ...

  7. AC日记——[HAOI2015]树上操作 洛谷 P3178

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...

  8. OceanBase分区表有什么不同?

    概述 分区表是ORACLE从8.0开始引入的功能,也是第一个支持物理分区的数据库,随后其他数据库纷纷跟进.分区表是一种“分而治之”的思想,通过将大表.索引分成可以独立管理的.小的片段(Segment) ...

  9. 洛谷——P2658 汽车拉力比赛

    P2658 汽车拉力比赛 题目描述 博艾市将要举行一场汽车拉力比赛. 赛场凹凸不平,所以被描述为M*N的网格来表示海拔高度(1≤ M,N ≤500),每个单元格的海拔范围在0到10^9之间. 其中一些 ...

  10. 项目心得——按照指定的日期/时间创建Date对象

    项目心得——按照指定的日期/时间创建Date对象 有时,在做项目中,需要获得指定日期的Date对象,这个指定的日期或者时间可能不是当前的时间.下面讲解两种获取指定日期/时间的Date对象的方法: pa ...