In this shows moving scroll of page from sticky menu , with simple use of bootstrap. less code use, header is stick and navigation detect if user move scroll , easily current block div of which menu item.
Example
<html lang="en">
<head>
<title>Bootstrap scroll detect and menu change </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<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="#Fruit">Fruit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Vegitable">Vegitable</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Electronic">Electronic item</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">laptop</a>
<a class="dropdown-item" href="#section42">cooling items</a>
</div>
</li>
</ul>
</nav>
<div id="Fruit" class="container-fluid bg-success" style="padding-top:70px; padding-bottom:70px">
<h1>Fruit</h1>
<p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>
</div>
<div id="Vegitable" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Vegitable</h1>
<p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>
</div>
<div id="Electronic" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Electronic item</h1>
<p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>
</div>
<div id="laptop" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>laptop</h1>
<p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>
</div>
<div id="mobile" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>cooling items</h1>
<p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>
</div>
</body>
</html>
1) call bootstrap.min.js and css
2) 'nav-item' & 'nav-item dropdown' using this class name add menubar
3) create div with same id as href link for menu item.
No comments:
Post a Comment