bootstrap顶部导航栏监听下方内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏滚动监听下方内容</title> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>导航条</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> <style> body { position: relative; top:60px; } </style> </head> <body data-spy="scroll" data-target="#mynav" data-offset="200"> <!--监听body体的导航栏,监听的目标是mynav , 对元素的偏移量为200px--> <div class="container"> <!--导航栏--> <nav class="navbar navbar-inverse navbar-fixed-top" id="mynav"> <!--导航栏固定在顶部--> <div class="container"> <!--导航栏 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#java">JAVA</a></li> <li><a href="#php">PHP</a></li> <li><a href="#html">HTML</a></li> </ul> </div> </div> </nav> <!--内容栏--> <div id="java" class="panel panel-primary"> <div class="panel-heading"><h1>JAVA</h1> </div> <div class="panel-body"> <h2 >java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!</h2> </div> </div> <div id="php" class="panel panel-primary"> <div class="panel-heading"><h1>PHP</h1> </div> <div class="panel-body"> <h2>php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!</h2> </div> </div> <div id="html" class="panel panel-primary"> <div class="panel-heading"><h1>HTML</h1> </div> <div class="panel-body"> <h2>html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!</h2> </div> </div> </div> </body> </html>bootstrap左侧导航监听右侧内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧滚动栏监听</title> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>导航条</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> <style> body { position: relative; top:60px; } #mynav{ position: fixed; top:300px; left:100px; } </style> </head> <body data-spy="scroll" data-target="#mynav" data-offset="200"> <!--监听body体的导航栏,监听的目标是mynav , 对元素的偏移量为200px--> <div class="container"> <!--导航栏--> <div class="col-md-1" id="mynav"> <ul class="nav nav-pills"> <li class="active"><a href="#java">JAVA</a></li> <li><a href="#php">PHP</a></li> <li><a href="#html">HTML</a></li> </ul> </div> <!--内容栏--> <div class="col-md-11"> <div id="java" class="panel panel-primary"> <div class="panel-heading"><h1>JAVA</h1> </div> <div class="panel-body"> <h2 >java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!</h2> </div> </div> <div id="php" class="panel panel-primary"> <div class="panel-heading"><h1>PHP</h1> </div> <div class="panel-body"> <h2>php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!</h2> </div> </div> <div id="html" class="panel panel-primary"> <div class="panel-heading"><h1>HTML</h1> </div> <div class="panel-body"> <h2>html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!</h2> </div> </div> </div> </div> </body> </html>
使用Jquery结合列表组list-group的方式创建滚动列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧滚动栏监听</title> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>导航条</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> <style> body { position: relative; top:60px; } .list-group{ position: fixed; top: 200px; } </style> </head> <body data-spy="scroll" data-target="#mynav" data-offset="200"> <!--监听body体的导航栏,监听的目标是mynav , 对元素的偏移量为200px--> <div class="container"> <!--导航栏--> <div class="col-md-1" id="mynav"> <div class="list-group"> <a id="java" class="list-group-item active" href="javascript:">JAVA</a> <a id="php" class="list-group-item" href="javascript:">PHP</a> <a id="html" class="list-group-item" href="javascript:">HTML</a> </div> </div> <!--内容栏--> <div class="col-md-11"> <div class="panel panel-primary" idx="java"> <div class="panel-heading"><h1>JAVA</h1> </div> <div class="panel-body"> <h2 >java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!java is vary much!</h2> </div> </div> <div class="panel panel-primary" idx="php"> <div class="panel-heading"><h1>PHP</h1> </div> <div class="panel-body"> <h2>php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!php is vary much!</h2> </div> </div> <div class="panel panel-primary" idx="html"> <div class="panel-heading"><h1>HTML</h1> </div> <div class="panel-body"> <h2>html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!html is vary much!</h2> </div> </div> </div> </div> <script> //自定义监听逻辑,当页面滚动的时候 $(window).scroll(function(){ $(".panel").each(function(){ //获取屏幕已经滚动的高 屏幕滚动高度 = $(window).scrollTop(); //屏幕滚动高度 元素与顶部距离 = $(this).offset().top; //元素相对于屏幕顶部的偏移量 if(屏幕滚动高度>=(元素与顶部距离-300)){ //当屏幕滚动的高度大于等于元素距离顶部的距离时 idx = $(this).attr("idx"); //获取到元素身上存储的idx属性中的值 $("#"+idx).addClass("active"); //并根据这个值找到左侧列表组中的对应li元素给他加一个active $(".list-group-item").not($("#"+idx).addClass("active")).removeClass("active"); //其他的元素的active全部去除 } }); }) </script> </body> </html>
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
