常用功能

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. Blockade(Bzoj1123)

    Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...

  2. GIT版本控制系统(二)

    貌似第二条有点用,还木有都验证过,贴过来再说~ 转自: http://www.cnblogs.com/lhb25/p/10-useful-advanced-git-commands.html 1. 导 ...

  3. centos-7.4_ceph-12.2.4部署

    centos-7.4_ceph-12.2.4部署: 前言: 基于centos7.4安装ceph-luminous的主要步骤有一下几点: 1.安装centos7.4的系统,并配置网卡 2.安装前的环境配 ...

  4. sap程序下载

    有时需要下载sap 中的程序   一屏一屏的拷贝非常麻烦 这里是在网上找的的一个下载工具   实际就是一个sap程序   建立好sap程序 把代码拷贝进去 在参数处输入程序名字  和下载位置  F8运 ...

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

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

  6. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  7. linux 虚拟环境问题

    1.python环境 python2和python3命令用来区分python版本 pip2和pip3命令用来区分pip,你的包到底安装在哪里pip3 install xxx sudo apt inst ...

  8. js 弹性菜单

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. linux服务器后台运行程序

    让程序脱离终端单独运行 nohub ... & 重新连接ssh后,ps ux 可以查看所有后台程序

  10. Go语言基础之10--面向对象编程2之方法

    一.方法的定义 之前我们学习了结构体(struct),其仅仅是对数据的封装,并没有行为方法,还不是一个完全的面向对象的思路,所以现在我们来学习在结构体的基础上如何去定义一个方法.结构体(类)+方法=完 ...