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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
原生js的数组除重复简单实例
May 24 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Django框架封装外部函数示例
2019/05/28 Python
什么是python类属性
2020/06/10 Python
大数据分析用java还是Python
2020/07/06 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
大四学生思想汇报
2014/01/13 职场文书
生日宴会主持词
2014/03/20 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
出差报告格式模板
2014/11/06 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
身份证丢失证明
2015/06/19 职场文书
病假条格式范文
2015/08/17 职场文书
教师反邪教心得体会
2016/01/15 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
MYSQL 运算符总结
2021/11/11 MySQL