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 面向对象 重载
May 13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
JS高级运动实例分析
Dec 20 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php实现等比例压缩图片
2018/07/26 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
wxPython 入门教程
2008/10/07 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
init进程的作用
2015/08/20 面试题
优良学风班总结材料
2014/02/08 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
致共产党员倡议书
2014/04/16 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015个人半年总结范文
2015/03/09 职场文书
python基础之文件处理知识总结
2021/05/23 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫