boostrap滚动监听

最新推荐文章于 2019-08-19 16:04:47 发布
转载 最新推荐文章于 2019-08-19 16:04:47 发布 · 345 阅读 · 1

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 可以用下载到本地的css文件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 可以用下载到本地的js文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 可以用下载到本地的js文件 -->
<style>
body {
position: relative;
}

#section1 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #1E88E5;
}

#section2 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #673ab7;
}

#section3 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #ff9800;
}

#section41 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #00bcd4;
}

#section42 {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #009688;
}
</style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="#section1">Section 1</a>
</li>
<li>
<a href="#section2">Section 2</a>
</li>
<li>
<a href="#section3" data-click="scroll-to-target">Section 3</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#section41">Section 4-1</a>
</li>
<li>
<a href="#section42">Section 4-2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
the navigation bar while scrolling!</p>
</div>

</body>

</html>
BootStrap滚动监听
秋城落叶的博客
03-31 2272
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标 其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加.activeclass <bodydata-spy="scroll"data-target=".navbar-example"> ... <divclass...
Bootstrap 滚动监听
wjs2024的博客
08-23 335
Bootstrap 是一个流行的前端框架，它提供了许多实用的组件和插件，帮助开发者快速构建响应式和移动设备优先的网页。其中，滚动监听（Scrollspy）是 Bootstrap 提供的一个功能，它能够自动更新导航栏中的激活链接，以匹配当前滚动位置。这一特性在创建单页面应用（SPA）或具有多个锚点链接的页面时非常有用，因为它能够提供更好的用户体验。
Bootstrap中的滚动监听
虾米博客
10-20 1740
Bootstrap中的滚动监听---引用scrollspy.js，或者是bootstrap.js。 具体看下列代码： 首先设置一下Css简单的样式 .div1{height: 300px;width: 100%;background: red;} body{position: relative;} 不需要JS代码，具体的Html代码如下： body data-spy="scroll" d
bootstrap之滚动监听
banfu2106的博客
12-14 187
bootstrap之滚动监听 作者原创，未经允许，拒绝转载。 首先做一个导航，这个地方有一个 class="navbar-example" 是用来做绑定的 <div class="navbar-example"> <!-- 导航 a中href="#one" 来寻找锚点--> <ul class="nav nav-tabs" ro...
bootstrap解决定时刷新滚动条弹到最顶端的问题
JessieZao的博客
07-05 3884
      这个问题是这样的，      场景：当一个表格中数据比较多的时候，会增加一个滚动条，但是同时页面需要定时刷新，可以看到最新的数据，      问题：问题是当我们正在看最下边的数据的时候，自动刷新，滚动条会被定位到左上边，从而自己想要看的那条数据还得往下翻，给用户造成很大的影响       解决问题：解决问题的逻辑是，当刷新的之前获取滚动条的位置，刷新完了之后，将刷新之前的位置重新赋值给...
监听页面滚动相关知识点
weixin_33735077的博客
10-23 235
监听事件 代码 function pageChange () { // ... 页面滚动时，需要做的事情 } window.addEventListener("scroll" , pageChange, false); 知识点 1、使用 window.addEventListener 和 document.addEventList...
Bootstrap 滚动监听（Scrollspy）插件
01-19
Bootstrap 滚动监听（Scrollspy）插件 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 ...
学习Bootstrap滚动监听 附调用方法
09-02
接下来，我们将深入探讨Bootstrap滚动监听的工作原理、使用方法以及如何实现。 1. **工作原理**： Bootstrap滚动监听通过监听滚动事件来跟踪用户在页面中的滚动位置。当页面内容滚动到某个特定的锚点（例如`<a>`...
Bootstrap滚动监听（Scrollspy）插件详解
11-23
Bootstrap滚动监听（Scrollspy）插件是一个非常实用的交互组件，它主要用于自动更新网页的导航菜单，以便在用户滚动页面时高亮当前可视区域的相应导航项。这个插件是Bootstrap框架的一部分，能够为用户提供更好的...
bootstrap滚动监听示例
张林强的专栏
09-05 5454
bootstrap滚动监听插件的简单应用示例,可以方便的移植到项目中去
Bootstrap 滚动监听(Scrollspy)
前端小99的博客
03-24 3465
  body {   position: relative;       }  &lt;/style&gt;&lt;/head&gt;&lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt;&lt;nav class="navbar navbar-expand-sm  navbar-dark fixed
Bootstrap3 滚动监听的使用方法
歪脖先生的博客
05-28 2578
滚动监听 Bootstrap的滚动监听插件（scrollspy.js）能够根据滚动的位置，自动更新导航条中相应的导航项。 什么是滚动监听？先看一个简单的例子：假设页面上有两个区域，一个是导航区域，一个是内容区域。导航区域的每个链接，都指向内容区域的一个锚点。这样的话，点击导航上的某个链接，就可以跳转到内容区域的相应锚点。 滚动监听，就是实现内容区域和导航链接的反向关联。简单地讲，就是在滚动内...
Bootstrap之滚动监听
一只前端小白的博客
03-14 3221
首先需要对监听的组件添加相对定位 一般我们监听的都是body，所以直接给body一个相对定位 body { position: relative; } 给监听的组件添加 position: relative; 之后，通过 js代码启动滚动监听插件 $('body').scrollspy({ target: '链接标签的id/类名' }) 实例：
PullToRefreshScrollView实现y轴滑动监听
Vampire奇的博客
12-10 823
PullToRefreshScrollView实现y轴滑动监听
监听页面滚动及滚动到指定位置
08-19 4687
两种监听页面滚动的方法 一、原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;conso...
scrollspy（滚动监听）的使用方法
简约靳
04-19 8937
源码文件：Scrollspy.js实现功能1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项2、使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以。导航必须是 .nav &gt; li &gt; a 结构，并且a上href或data-target要绑定hashkey3、在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div...
【学习笔记】Bootstrap插件 滚动监听+弹出框+选项卡
weixin_39780365的博客
01-14 1048
--滚动监听 依赖导航组件 步骤： 1.写一个导航组件 2.data-target="#test"执行滚动监听的目标    data-spy="scroll" 向想要监听的元素 添加滚动监听 ios php java ios 这是ios的内容这是ios的内容这是ios的内容这是ios的
bootstrap滚动监听
最新发布
09-29
Bootstrap滚动监听是指利用Bootstrap框架提供的功能，监控网页内容区域（如`.scroll`元素）的滚动事件，以便在用户滚动页面时执行特定的操作。通常，这用于实现像滚动加载更多内容、导航栏固定效果、响应式菜单展开等动态交互。 在Bootstrap中，你可以使用JavaScript插件如`bootstrap-scrollspy`或者直接编写原生JavaScript来监听滚动事件。以下是简单的示例： ```javascript // 使用jQuery的滚动监听 $(window).on('scroll.bs.scrollspy', function() { // 当滚动到某个目标元素时执行的回调函数 }); // 或者使用纯JS document.addEventListener("DOMContentLoaded", function () { window.addEventListener("scroll", function(e) { var scrollPosition = window.pageYOffset; // 检查是否到达了滚动底部或其他条件 if (scrollPosition >= someCondition) { // 执行相应操作 } }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值