jquery实现Li滚动时滚动条自动添加样式的方法


Posted in Javascript onAugust 10, 2015

本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法。分享给大家供大家参考。具体如下:

这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加样式。

运行效果截图如下:

jquery实现Li滚动时滚动条自动添加样式的方法

具体代码如下:

<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll滚动,LI随滚动条自动变化</title>
<style>
.sub_menu_frame {
position: fixed;
top: 50px;
width: 280;
height:400px;
right:20px;
overflow:auto;
background: rgb(221, 221, 255);
color: red;
}
h2 {color: green;margin-top:350px;}
span {color: red;display: none;}
.avtive{background: rgb(211, 211, 211);color: rgb(88, 88, 88);border: 1px solid rgb(190, 190, 190);}
</style>
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div class="sub_menu_frame">
 <ul class="sub_menu">
  <li class='icbtn'><a href="#h1">11111111111</a></li>
  <li class='icbtn'><a href="#h2">222222222222222</a></li>
  <li class='icbtn'><a href="#h3">333333333</a></li>
  <li class='icbtn'><a href="#h4">444444444444</a></li>
  <li class='icbtn'><a href="#h5">555555555555</a></li>
   <li class='icbtn'><a href="#h6">66666666666</a></li>
   <li class='icbtn'><a href="#h7">77777777777777</a></li>
   <li class='icbtn'><a href="#h8">88888888888888</a></li>
   <li class='icbtn'><a href="#h9">9999999999999</a></li>
 </ul>
</div>
</div>
<h2 id='h1'>
 hello1
</h2>
 <h2 id='h2'>
 hello2
</h2 ><h2 id='h3'>
 hello3
</h2><h2 id='h4'>
 hello4
</h2><h2 id='h5'>
 hello5
</h2><h2 id='h6'>
 hello6
</h2>
</h2><h2 id='h7'>
 hello7
</h2>
</h2><h2 id='h8'>
 hello8
</h2>
</h2><h2 id='h9'>
 hello9
</h2>
<script>
$(function(){
  $(".sub_menu li a").click(function(){
  $(".sub_menu li a").removeClass('avtive');
  $(this).addClass('avtive');
 });
 });
$( window ).scroll(function() {
 var hh=$( 'h2' );
 var sctop = $(this).scrollTop();
 hh.each(function(){ 
  var park=$(this).offset().top-sctop;
  if(park<350 && park>0)
   {
   $(".sub_menu li a").removeClass('avtive');
   var inde=$(this).index()-1;
   $(".sub_menu li:eq("+inde+") a").addClass('avtive');
    console.log($(this).index()+$(this).html());
   }
 });
});
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
javascript密码强度校验代码(两种方法)
Aug 10 #Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 #Javascript
You might like
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
基于vue实现分页效果
2017/11/06 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
vscode 远程调试python的方法
2017/12/01 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python修改列表值问题解决方案
2020/03/06 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
医药销售求职信范文
2014/02/01 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
个人收入证明模板
2014/09/18 职场文书
综合实践活动报告
2015/02/05 职场文书
班主任高考寄语
2015/02/26 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis