左侧栏与右侧内容之锚点、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 ...
随机推荐
- 静态-static
静态 1. 静态初始化块 (1)可初始化类的静态字段 (2)静态初始化块只调用一次 (3)创建子类时会调用父类的静态初始化块 源代码: class Root { static{ System.out. ...
- QQ空间爬虫--获取好友信息
QQ空间网页版:https://user.qzone.qq.com/ 登陆后,进入设置,有一个权限设置,设置“谁能看我的空间”为好友可见,然后构造爬虫. (1)获取Cookie 两种方式: 第一种:通 ...
- Weekly Contest 114
955. Delete Columns to Make Sorted II We are given an array A of N lowercase letter strings, all of ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 调停者模式Mediator(中介者模式)详解
原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/20/2554024.html 在阎宏博士的<JAVA与模式>一书中开头 ...
- python 矩阵(mat)操作
1.矩阵的创建 由一维或二维数据创建矩阵 a1=array([1,2,3]); a1=mat(a1); data1=mat(zeros((3,3))); #创建一个3*3的零矩阵,矩阵这里zeros函 ...
- 谁能赢呢? BZOJ 2463
题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...
- HDU6315 Naive Operations(多校第二场1007)(线段树)
Naive Operations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 502768/502768 K (Java/Other ...
- 小聊outline和border
border与outline: border属性: border-width.border-style.border-color 其中border-style可以为none或hidden outlin ...
- laravel 用户名登录
laravel 用户名登录 默认登录设置为用户登录 laravel 5.3+ 修改文件(app\Http\Controllers\Auth\LoginController.php)增加 public ...