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中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
json的使用小结
Jun 08 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
express框架中使用jwt实现验证的方法
Aug 25 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使用base64加密解密图片示例分享
2014/01/20 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php单例模式示例分享
2015/02/12 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Python备份Mysql脚本
2008/08/11 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python内置函数dir详解
2015/04/14 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python3让print输出不换行的方法
2020/08/24 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
美容师的职业规划书
2013/12/27 职场文书
高中班主任评语
2014/12/30 职场文书
爱情保证书
2015/01/17 职场文书
邀请书模板
2015/02/02 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
mysql 索引合并的使用
2021/08/30 MySQL