滚动监听

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示,滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。

用法

依赖 Bootstrap 的导航组件

滚动监听插件依赖 Bootstrap 的导航组件 用于高亮显示当前激活的链接。

body {
  position: relative;
}

通过 data 属性调用

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>
时间: 2024-10-30 16:06:30

滚动监听的相关文章

滚动监听(bootstrap)

1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com

Bootstrap入门(二十六)JS插件3:滚动监听

很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这将是该元素<body>).然后添加data-target任何引导的父元素的ID或类属性.nav的组件. 我们来写一个基本的实例 先引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我

bootstrap滚动监听

Bootstrap ScrollSpy(滚动监听)是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容 官方说的想要利用此功能需要引入以下文件: bootstrap/css/bootstrap.css    jquery.1.9.1.js    bootstrap.js    bootstrap-dropdown.js    bootstrap-scrollspy.js 不过经过测试 只需要前三个即可 以下是我测试的代码: <!DOCTYP

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

滚动监听: bootstrap 的scrollspy

滚动监听 bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加 .active类.本身导航没有position:fixed,需要自己加入 滚动监听.只有滚动和监听,只有默认锚点链接做调转,若想改变,只有自己写跳转方法-- 阻止a标签跳转(不直接用锚点链接做跳转):而是用animate(scrollTop)跳转,scrollTop可以设置距顶端的距离.animate({scrollTop: }); html <div id="menu"> <d

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

Bootstrap学习js插件篇之滚动监听

1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: [html] view plaincopy <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header&quo

Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

bootstrap的滚动监听

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>下拉菜