常用功能

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()的更多相关文章

  1. HTML实用案例(1)—— 左侧菜单,右侧内容的布局(带左侧菜单点击隐藏显示效果)

    效果图 代码部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  2. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

  3. CSS 实现左侧固定,右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  4. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  5. ajax实现简单的点击左侧菜单,右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

  6. web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

    (1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...

  7. CSS基础布局--居中对齐,左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  8. css左侧固定宽度,右侧自适应的几种实现方法

    左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...

  9. Intellij Idea 导入多个maven项目展示在左侧栏Maven Projects

    刚刚要开始从eclipse切换成idea,据说idea功能强大,可是刚刚开始使用很多不习惯,导入第二个maven项目时之前的项目就没了,比较苦恼,下面介绍下导入多个maven项目展示在左侧栏Maven ...

随机推荐

  1. Category 分类

    1.Category 1)分类/类别(category): 允许以模块的方式向现有类定义添加新的方法(默认不能添加实例变量).用以扩展自己或他人以前实现的类,使它适合自己的需要. 分类的名称括在类名之 ...

  2. codevs1169, 51nod1084(多线程dp)

    先说下codevs1169吧, 题目链接: http://codevs.cn/problem/1169/ 题意: 中文题诶~ 思路: 多线程 dp 用 dp[i][j][k][l] 存储一个人在 (i ...

  3. UncategorizedSQLException Mybatis中jdbcType的作用

    使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...

  4. 2019.2.25考试T3, 离线+线段树

    \(\color{#0066ff}{题解}\) #include<bits/stdc++.h> #define LL long long LL in() { char ch; LL x = ...

  5. window安装配置 zookeeper 单机模式

    1.zookeeper简单介绍 zookeeper是一个分布式的,开放源码的分布式应用程序协调服务,我所了解到的主要的使用场景有两个 (1).微服务注册中心(Dubbo较常用Zookeeper做注册中 ...

  6. [国家集训队]happiness 最小割 BZOJ 2127

    题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...

  7. 网络中常用的各种协议(针对TCP/IP协议组)

    网络层: ip协议->网络互连协议 用途:将多个包在网络中联系起来,传输数据包(不可靠传输),最基本功能就是寻址和分段功能,不提供端到端,路由到路由的确认,不提供重发和流量控制.是计算机网络能狗 ...

  8. svg path 路径

    许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...

  9. P5123 [USACO18DEC]Cowpatibility(容斥)

    Luogu5123 计算[两组数中有相同的]=\(\sum_{i}\)两组数中\(i\)个数相同的组合方案 map <string,int> 操作\(:\)加上\(,\)防止算重 #inc ...

  10. Vim 编辑器中全选操作

    ggVG  解释: gg 让光标移到首行,在vim才有效,vi中无效 V   是进入Visual(可视)模式 G  光标移到最后一行