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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
实现无刷新联动例子汇总
May 20 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
深入探究node之Transform
Jul 20 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue-router命名视图的使用讲解
Jan 19 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
改造一台复古桌面收音机
2021/03/02 无线电
新版PHP极大的增强功能和性能
2006/10/09 PHP
用PHP发电子邮件
2006/10/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
详解php中反射的应用
2016/03/15 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python根据url地址下载小文件的实例
2018/12/18 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
什么是.net
2015/08/03 面试题
大学生工作自荐书
2014/06/16 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
张丽莉观后感
2015/06/16 职场文书
同意转租证明
2015/06/24 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Python如何使用循环结构和分支结构
2022/04/13 Python