bootstrap scrollspy用法 bootstrapscrollspy|Bootstrap教程

本文概述

Bootstrap垂直滚动菜单

Bootstrap Scrollspy插件用于基于滚动位置自动更新导航列表中的链接。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F422JV-1.jpg">< /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="http://www.srcmini.com/#">WebSiteName< /a> < /div> < div> < div class="collapse navbar-collapse" id="myNavbar"> < ul class="nav navbar-nav"> < li>< a href="http://www.srcmini.com/#section1">Section 1< /a>< /li> < li>< a href="http://www.srcmini.com/#section2">Section 2< /a>< /li> < li>< a href="http://www.srcmini.com/#section3">Section 3< /a>< /li> < li class="dropdown">< a class="dropdown-toggle" data-toggle="dropdown" href="http://www.srcmini.com/#">Section 4 < span class="caret">< /span>< /a> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#section41">Section 4-1< /a>< /li> < li>< a href="http://www.srcmini.com/#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垂直滚动菜单你也可以使用垂直导航药丸作为菜单。
【bootstrap scrollspy用法】请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F422JV-1.jpg">< /script> < style> body { position: relative; } ul.nav-pills { top: 20px; position: fixed; } div.col-sm-9 div { height: 250px; font-size: 28px; } #section1 {color: #fff; background-color: #1E88E5; } #section2 {color: #fff; background-color: #673ab7; } #section3 {color: #fff; background-color: #ff9800; } #section41 {color: #fff; background-color: #00bcd4; } #section42 {color: #fff; background-color: #009688; }@media screen and (max-width: 810px) { #section1, #section2, #section3, #section41, #section42{ margin-left: 150px; } } < /style> < /head> < body data-spy="scroll" data-target="#myScrollspy" data-offset="20">< div class="container"> < div class="row"> < nav class="col-sm-3" id="myScrollspy"> < ul class="nav nav-pills nav-stacked"> < li class="active">< a href="http://www.srcmini.com/#section1">Section 1< /a>< /li> < li>< a href="http://www.srcmini.com/#section2">Section 2< /a>< /li> < li>< a href="http://www.srcmini.com/#section3">Section 3< /a>< /li> < li class="dropdown"> < a class="dropdown-toggle" data-toggle="dropdown" href="http://www.srcmini.com/#">Section 4 < span class="caret">< /span>< /a> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#section41">Section 4-1< /a>< /li> < li>< a href="http://www.srcmini.com/#section42">Section 4-2< /a>< /li> < /ul> < /li> < /ul> < /nav> < div class="col-sm-9"> < div id="section1"> < h1>Section 1< /h1> < p>Try to scroll this section and look at the navigation list while scrolling!< /p> < /div> < div id="section2"> < h1>Section 2< /h1> < p>Try to scroll this section and look at the navigation list while scrolling!< /p> < /div> < div id="section3"> < h1>Section 3< /h1> < p>Try to scroll this section and look at the navigation list while scrolling!< /p> < /div> < div id="section41"> < h1>Section 4-1< /h1> < p>Try to scroll this section and look at the navigation list while scrolling!< /p> < /div> < div id="section42"> < h1>Section 4-2< /h1> < p>Try to scroll this section and look at the navigation list while scrolling!< /p> < /div> < /div> < /div> < /div>< /body> < /html>