<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
position:relative;
in your CSS, call the scrollspy via JavaScript:$('body').scrollspy({ target: '#navbar-example' })
Name | Type | Default | Description |
---|---|---|---|
offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Scrollspy</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid">
<style>
body {
position: relative;
}
#HTML5 {padding-top:150px;height:600px;color: #fff; background-color:#606;}
#CSS3 {padding-top:150px;height:600px;color: #fff; background-color: #F60;}
#JAVASCRIPT {padding-top:150px;height:600px;color: #fff; background-color: #390;}
#BOOTSTRAP {padding-top:150px;height:600px;color: #fff; background-color: #FC0;}
</style>
<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.freetimelearning.com" target="_blank">FREE TIME LEARNING</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#HTML5">HTML5</a></li>
<li><a href="#CSS3">CSS3</a></li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">MORE TUTORIALS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
<li><a href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="HTML5" class="container-fluid">
<h1>HTML5</h1>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3" class="container-fluid">
<h1>CSS3</h1>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT" class="container-fluid">
<h1>JAVASCRIPT</h1>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p></div>
<div id="BOOTSTRAP" class="container-fluid">
<h1>BOOTSTRAP</h1>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Scrollspy</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container-fluid">
<style type="text/css">
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 630px;
padding:200px 20px 0px;
font-size: 14px;
}
#HTML5 {color: #fff; background-color: #606;}
#CSS3 {color: #fff; background-color: #F60;}
#JAVASCRIPT {color: #fff; background-color: #390;}
#BOOTSTRAP {color: #fff; background-color: #FC0;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#HTML5">HTML5</a></li>
<li><a href="#CSS3">CSS3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE TUTORIALS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
<li><a href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="HTML5">
<h1>HTML5</h1>
<p>HTML5 (No space between "HTML" and "5")is a markup language
used for structuring and presenting content on the World Wide Web.
It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML
5.1 Candidate Recommendation on 21 June 2016. The World Wide Web
Consortium (W3C) to improve the language with support for the latest
multimedia, while keeping it both easily readable by humans and
consistently understood by computers and devices such as web browsers.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and
Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3">
<h1>CSS3</h1>
<p>The CSS was started to develop around 1998. And till 2009, it was
under development. The first working draft of CSS3 came in 19-01-2001.
but it was initially declared early in the June 1999. The main difference
between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
Color.</p>
</div>
<div id="JAVASCRIPT">
<h1>JAVASCRIPT</h1>
<p>JavaScript is the programming language of the Web. Javascript Most commonly
used websites this is client-side script to interact with the user and make
dynamic pages. All modern web browsers on desktops, tablets, and smart phones
are using JavaScript. JavaScript is part of the triad of technologies that all
Web developers must learn: HTML(Hyper Text Markup Language) to specify the
content of web pages, CSS(Cascading Style Sheets) to specify the presentation
of web pages, and JavaScript to specify the behavior of web pages.</p>
</div>
<div id="BOOTSTRAP">
<h1>BOOTSTRAP</h1>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Method | Description | Example |
---|---|---|
.scrollspy ("refresh") |
When calling the scrollspy via the JavaScript method, you need to call the .refresh the DOM. |
$('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh') }) |
Event | Description | Example |
---|---|---|
activate.bs.scrollspy | This event fires whenever a new item becomes activated by the scrollspy. |
$('#myScrollspy').on('activate.bs.scrollspy', function (){
// Some Content.. }) |