常用功能

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. 静态-static

    静态 1. 静态初始化块 (1)可初始化类的静态字段 (2)静态初始化块只调用一次 (3)创建子类时会调用父类的静态初始化块 源代码: class Root { static{ System.out. ...

  2. QQ空间爬虫--获取好友信息

    QQ空间网页版:https://user.qzone.qq.com/ 登陆后,进入设置,有一个权限设置,设置“谁能看我的空间”为好友可见,然后构造爬虫. (1)获取Cookie 两种方式: 第一种:通 ...

  3. Weekly Contest 114

    955. Delete Columns to Make Sorted II We are given an array A of N lowercase letter strings, all of ...

  4. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  5. 调停者模式Mediator(中介者模式)详解

    原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/20/2554024.html 在阎宏博士的<JAVA与模式>一书中开头 ...

  6. python 矩阵(mat)操作

    1.矩阵的创建 由一维或二维数据创建矩阵 a1=array([1,2,3]); a1=mat(a1); data1=mat(zeros((3,3))); #创建一个3*3的零矩阵,矩阵这里zeros函 ...

  7. 谁能赢呢? BZOJ 2463

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  8. HDU6315 Naive Operations(多校第二场1007)(线段树)

    Naive Operations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 502768/502768 K (Java/Other ...

  9. 小聊outline和border

    border与outline: border属性: border-width.border-style.border-color 其中border-style可以为none或hidden outlin ...

  10. laravel 用户名登录

    laravel 用户名登录 默认登录设置为用户登录 laravel 5.3+ 修改文件(app\Http\Controllers\Auth\LoginController.php)增加 public ...