bootstrap的滚动监听
2019獨角獸企業重金招聘Python工程師標準>>>
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="utf-8">
?? ?<title>bootstrap中滾動導航監聽主要的就是在導航中a標簽的href屬性值與要控制的div的id屬性對應</title>
?? ?<meta name="viewport" content="width=device-width, initial-scale=1">
?? ?<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
?? ?<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
?? ?<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
?? ?<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">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>
轉載于:https://my.oschina.net/u/3803573/blog/2875082
總結
以上是生活随笔為你收集整理的bootstrap的滚动监听的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： event
- 下一篇： 从普通JAVA程序员到阿里P8架构师，他