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 一个图片切换的插件
Oct 09 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
了解JavaScript中let语句
May 30 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python实时监控cpu小工具
2018/06/21 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python实现网页录音效果
2020/10/26 Python
python matlab库简单用法讲解
2020/12/31 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
婚纱摄影师求职信范文
2014/04/17 职场文书
酒店节能降耗方案
2014/05/08 职场文书
自我管理的活动方案
2014/08/25 职场文书
小学教师读书笔记
2015/07/01 职场文书
找规律教学反思
2016/02/23 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技