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之更有效率的字符串替换
Aug 02 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
JavaScript 正则命名分组【推荐】
Jun 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
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python常见数制转换实例分析
2015/05/09 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
市场营销求职信范文
2014/02/21 职场文书
完美的中文自荐信
2014/05/24 职场文书
建筑管理专业求职信
2014/07/28 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
借条格式范本
2015/05/25 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
告知书格式
2015/07/01 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers