常用功能

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. GitHub下载代码到本地

    1.git  clone git@github.com:Sehunwy/test.git(加粗的是下载的地址) 2.下载完成,此时本地是这样的: 参考:https://blog.csdn.net/qq ...

  2. JavaScript学习笔记——1.了解JavaScript

    百度百科: JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HT ...

  3. 拓扑排序/DP【洛谷P2883】 [USACO07MAR]牛交通Cow Traffic

    P2883 [USACO07MAR]牛交通Cow Traffic 随着牛的数量增加,农场的道路的拥挤现象十分严重,特别是在每天晚上的挤奶时间.为了解决这个问题,FJ决定研究这个问题,以能找到导致拥堵现 ...

  4. luogu2486 [SDOI2011]染色

    link 题目大意:给定一个N个点的树,每个点有一个颜色 有M次操作,每次可以修改树某条链所有点变成一个颜色,查询某条链上点的颜色段数 树剖,线段树维护区间合并 我的代码记录的是某个区间左端点颜色.右 ...

  5. [比赛|考试]nowcoder NOIP提高组组第二场

    160/300pts,rank16(100,30,30) 在自身找毛病,首先做题感觉还不不够认真,比如T3那个我一开始审出来了,然后tmd忘了...gg...T1AC没啥好赞美的,T2T3暴力没拿全啊 ...

  6. Swift 4.0 正式发布,更快更兼容更好用

    Swift4现已正式发布!Swift4在Swift3的基础上,提供了更强大的稳健性和稳定性,为Swift3提供源码兼容性,对标准库进行改进,并添加了归档和序列化等功能. 你可以通过观看WWDC2017 ...

  7. springboot整合mybatis,redis,代码(四)

    一 说明 这是spring整合redis注解开发的系类: 二 正文 在注解开发时候,会有这几个注解需要注意: 具体含义: 1.@Cacheable 可以标记在方法上,也可以标记在类上.当标记在方法上时 ...

  8. php版 日文半角转全角

    工作需要,写的这个 /* *转载请注明 http://www.cnblogs.com/kclteam/p/5278923.html$str //参数可以是字符串或数组*/ function HkToF ...

  9. JS模式和原型精解

    首先需要知道的是 模式只是思想.不要用 结构 看模式. ES中函数是对象,因此函数也有属性和方法. 每个函数含有两个属性: length 和 prototype 每个函数含有两个非继承的方法: app ...

  10. [JavaScript]instanceof String not behaving as expected in Google Apps Script

    Link: http://stackoverflow.com/questions/11571923/instanceof-string-not-behaving-as-expected-in-goog ...