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 相关文章推荐
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jquery图片切换插件
Mar 16 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jquery事件与绑定事件
Mar 16 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
vue+SSM实现验证码功能
Dec 07 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
python远程登录代码
2008/04/29 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
浅谈Python的文件类型
2016/05/30 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
教师自我评价范文
2013/12/16 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
警察群众路线整改措施
2014/09/26 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
团代会开幕词
2015/01/28 职场文书
店长岗位职责
2015/02/11 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
高温慰问简报
2015/07/21 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python