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 miscellanea -display data real time, using window.status
Jan 09 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php备份数据库类分享
2015/04/14 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
js实现小球在页面规定的区域运动
2020/06/16 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
浅谈五大Python Web框架
2017/03/20 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Pandas分组与排序的实现
2019/07/23 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
物业管理员岗位职责范文
2013/11/25 职场文书
平民服装店创业计划书
2014/01/17 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python