Hello everyone, tell me who knows how to implement the functionality of navigating the page like on this site http://pelmeni.dp.ua/ . Those. when you click on the link smooth scrolling to the item, and when you scroll the page, the necessary menu items are highlighted.
Or tell me the right keywords to search Thanks in advance
Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .
Bootstrap has an Affix plugin that does just that. Below is an example of its use with a small additive for a smooth scroll:
$('a[href*="#"]:not([href="#"])').click(function() { if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if(target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); body { position: relative; } .affix { top: 0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } #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; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Scrollspy & Affix Example</h1> <h3>Fixed navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <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> To view the example, expand it to the full page.
Found solution Single Page Nav Plugin
Source: https://ru.stackoverflow.com/questions/549267/
All Articles