Bootstrap Scrollspy, How To Create Single Page Website
Scrollspy basically use for single page website by creating sections with classes and id, with the help of scrollspy update links automatically in navigation list based on which position section you are.How to create scrollspy
To create scrollspy add data-spy="scroll" in the element you want to scrollable area mostly we use it in page <body> element. Then you have to add data-target attribute with the class or id of your navigation bar suppose you have class by name .navbar.Important part is scrollable elements should be match the id of the links inside the navbar list items, like <div id="section-1"> shoud match <a herf="#section-1"> and then data-offset attribute specifies the number of pixels to offset from top when calculating the position of your scroll.
Note:- data-spy="scroll" require the css postion property value of "relative" with this css value its always work perfectly.
Example:-
First of all add body cssbody {
position: relative;
}
Then Add Following Code.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</nav>
<div id="home" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
</div>
<div id="about" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div id="contact" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</body>
Scrollspy Vertical Menu
By default scrollspy are horizontal navigation bar. If you want you can create scrollspy with vertical menu also. To create vertical scrollspy use vertical navigation pills as menu.Example:-
First of all add following CSS in head or in your external css file.<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 200px;
padding-left: 20px;
}
</style>
But is not that important i am using this because i am not using too much content. If you are using long content then you can add only body css.
body {
position: relative;
}
Complete Code
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="home" class="bg-success">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div id="about" class="bg-warning">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div id="content" class="bg-secondary">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
</div>
</div>
</body>
No comments:
Post a Comment