左侧栏与右侧内容之锚点、offsetHeight、scrollTop()
常用功能
1、点击左侧,右侧相关内容随时点到。
2、滚动右侧信息,左侧标题随之显示背景。
第一点很简单,只要在左侧栏 <li><a href="#aaa">aaaaa</a></li> 与右侧列表<p class="title" id="aaa">aaaaa</p> 对应即可。
第二点:右侧滚动左侧标题随之对应。
1、触发scroll()事件
2、遍历右侧内容,如果滚动条高度<右侧内容高度,那么左侧对应的标题栏背景则显示。
内容高度是随着滚动不断增加的。
代码如下:
var modules=$(".module");
$(window).scroll(function () {
var _height = 0;
for (var i = 0; i < modules.length; i++) {
_height += modules[i].offsetHeight;
if($(this).scrollTop()<_height){
$(".menuLiList li").eq(i).addClass("selected").siblings("li").removeClass("selected");
break;
} }
})
左侧栏与右侧内容之锚点、offsetHeight、scrollTop()的更多相关文章
- HTML实用案例(1)—— 左侧菜单,右侧内容的布局(带左侧菜单点击隐藏显示效果)
效果图 代码部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- ajax实现简单的点击左侧菜单,右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
- web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- css左侧固定宽度,右侧自适应的几种实现方法
左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...
- Intellij Idea 导入多个maven项目展示在左侧栏Maven Projects
刚刚要开始从eclipse切换成idea,据说idea功能强大,可是刚刚开始使用很多不习惯,导入第二个maven项目时之前的项目就没了,比较苦恼,下面介绍下导入多个maven项目展示在左侧栏Maven ...
随机推荐
- 高产的母猪之 python __init__全解
python __init__.py python 识别是不是一个模块的标准是目录下有无 __init__.py 模糊导入 模糊导入中的*中的模块是由__all__来定义的,__init__.py的 ...
- spring boot 下websocket实现的两种方法
websocket前台实现代码,保存为html执行就好 html代码来自:https://blog.csdn.net/M348915654/article/details/53616837 <h ...
- SpringMVC from 表单标签和 input 表单标签
刚学习很懵 不知道还有springmvc 自己的表单 于是乎就上网查了一下 这个真的好用多啦 刚学习很懵 不知道还有springmvc 自己的表单 于是乎就上网查了一下 这个真的好用多啦 ...
- vue四、实例
1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...
- C语言预处理命令之文件包含
文件包含预处理命令的一般形式是: #include<文件名> 或者 #include“文件名” #include命令告诉预处理器用指定文件的内容替换这条命令,两种不同的命令格式决定了预处理 ...
- P3272 [SCOI2011]地板(插头DP)
[题面链接] https://www.luogu.org/problemnew/show/P3272 [题目描述] 有一个矩阵,有些点必须放,有些点不能放,用一些L型的图形放满,求方案数 [题解] ( ...
- Folyd算法(转+适合问题 )
Folyd算法适合多源最短路的求解问题(时间复杂度(O(n^3)),单源无负权值的问题适合Dijstra(O(n^2)) 小Hi强行装作没听到,继续说道:"这个算法的核心之处在于数学归纳法- ...
- Linux磁盘分区管理
1.分区步骤 fdisk -l 查看系统中的磁盘 fdisk /dev/vdb ...
- 阿里云 Ubuntu16.04 部署 LAMP
1.更新软件源 sudo apt-get update 2.安装Apache sudo apt-get install apache2 3.查看Apache是否安装成功 apache2 –v 如下所示 ...
- Photoshop入门教程(二):暂存盘设置与标尺设置
新建文档之后大家就可以对图像进行编辑.在对图像进行编辑之前,先来了解一下如何查看图像的一些基本信息.在软件左下角,会有这样的信息显示窗口. 1窗口表示当前图像显示比例,200%代表当前为放大两倍显示. ...