bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）
bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）
一、总结
一句话总结：通过监听滚动的高，判断滚动的高是否大于元素距离顶端的距离
1、如何知道屏幕滚动的高？
st=$(window).scrollTop();
2、如何知道元素距离顶端的距离？
offset的top属性
pt=$(this).offset().top;
3、bootstrap中如何实现滚动监听？
需要相对定位（relative positioning）
无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
通过 data 属性调用
To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
4、如何选中除自己之外的其它元素？
最好就是not方法，not方法里面可以放jquery选择器选择的jquery对象
$('.navbar-nav li').not($('.'+idx)).removeClass('active');
二、滚动监听如何实现（bootstrap方式和自定义方式）
1、相关知识
需要相对定位（relative positioning）
无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
通过 data 属性调用
To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.
body {
position: relative;
}<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>2、代码
bs滚动监听
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
body{
padding-top:60px;
position: relative;
}
</style>
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<script src="bs/js/holder.min.js"></script>
</head>
<body data-spy='scroll' data-target='#mynav' data-offset='150'>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" id='mynav'>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class='active'><a href="#linux">linux</a></li>
<li><a href="#php">php</a></li>
<li><a href="#js">js</a></li>
<li><a href="#html5">html5</a></li>
</ul>
</div>
</div>
</nav> <div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1 id='linux'>linux技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
</div>
</div> <div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1 id='php'>php技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
</div>
</div> <div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1 id='js'>js技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!</p>
</div>
</div> <div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1 id='html5'>html5技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!</p>
</div>
</div>
</div>
</body>
</html>
自定义滚动监听实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
body{
padding-top:60px;
position: relative;
} .list-group{
position: fixed;
top:200px;
}
</style>
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<script src="bs/js/holder.min.js"></script>
</head>
<body data-spy='scroll' data-target='#mynav' data-offset='150'>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class='active linux'><a href="">linux</a></li>
<li class='php'><a href="">php</a></li>
<li class='js'><a href="">js</a></li>
<li class='html5'><a href="">html5</a></li>
</ul>
</div>
</div>
</nav> <div class="row">
<div class="col-md-1">
<div class="list-group">
<a id='linux' href="javascript:" class="list-group-item active">linux</a>
<a id='php' href="javascript:" class="list-group-item ">php</a>
<a id='js' href="javascript:" class="list-group-item ">js</a>
<a id='html5' href="javascript:" class="list-group-item ">html5</a>
</div>
</div> <div class="col-md-11">
<div class="panel panel-primary" idx='linux'>
<div class="panel-heading">
<div class="panel-title">
<h1>linux技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
</div>
</div> <div class="panel panel-primary" idx='php'>
<div class="panel-heading">
<div class="panel-title">
<h1>php技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
</div>
</div> <div class="panel panel-primary" idx='js'>
<div class="panel-heading">
<div class="panel-title">
<h1>js技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!</p>
</div>
</div> <div class="panel panel-primary" idx='html5'>
<div class="panel-heading">
<div class="panel-title">
<h1>html5技术</h1>
</div>
</div>
<div class="panel-body">
<img src="holder.js/100%x500" alt="">
<p>html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!</p>
</div>
</div>
</div>
</div> </div>
</body>
<script>
$(window).scroll(function(){
$('.panel').each(function(){
st=$(window).scrollTop();
pt=$(this).offset().top; if(st>=(pt-200)){
idx=$(this).attr('idx');
$('#'+idx).addClass('active');
$('.list-group-item').not($('#'+idx)).removeClass('active'); $('.'+idx).addClass('active');
$('.navbar-nav li').not($('.'+idx)).removeClass('active');
}
});
});
</script>
</html>
bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）的更多相关文章
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- 滚动监听（bootstrap）
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- Bootstrap入门（二十六）JS插件3：滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- 滚动监听： bootstrap 的scrollspy
滚动监听 bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加 .active类.本身导航没有position:fixed,需要自己加入 滚动监听.只有滚动和监听,只有默认锚 ...
随机推荐
- POJ 1986 裸的LCA
思路:搞了一发链剖 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...
- netflix turbine概述
1.turbine是什么?它的作用是什么? Turbine is a tool for aggregating streams of Server-Sent Event (SSE) JSON data ...
- A电脑能ping 通B电脑，但B电脑无法ping能和访问B
过程: A电脑共享了打印机,B电脑想连接A的打印机,发现拒绝访问,无法登录A电脑 问题: A电脑能ping 通B电脑,但B电脑无法ping能和访问B 原因:A电脑禁用了共享访问 处理:使用一键共享设置 ...
- 威联通212P 在admin用户密码正确情况下仍然无法登录WEB页面解决办法
*登录 telnet 执行以下语句: [~] # cp /etc/default_config/passwd /mnt/HDA_ROOT/.config/passwd[~] # cp /etc/def ...
- Pycharm在Ubuntu14.04中的基本使用指南
前几天给大家分享了:如何在VMware虚拟机中安装Ubuntu14.04系统.今天给大家分享一下在Ubuntu14.04中如何简单的使用Pycharm.1.启动Pycharm,将进入Pycharm的启 ...
- oracle 正序 逆序 排序查询
正序:从小到大 order by t.id asc 逆序:从大到小 order by t.id desc
- this对象的理解
(回答一:) (1).js的this指向是不确定的,也就是说是可以动态改变的.call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高 (2).this 一般情况下 ...
- UVA 11642 Fire!
Fire! Time Limit: 1000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: 116 ...
- RQNOJ PID496/[IOI1999]花店橱窗布置
PID496 / [IOI1999]花店橱窗布置 ☆ 题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序 编号 ...
- Cocos2d-x--iOS平台lua加密成luac资源方法和Jsc文件<MAC平台开发试用--windows平台暂未研究>
首先要说.近期真的是太忙了.好久没写博客了,今天正好有空,就写一下近期在写游戏中的一些发现: 话说,基于Cocos2dx 引擎 + 脚本写游戏,至今的感触就是能够进行增量更新和即时编译 ...