How to make automatic navbar based on section of a webpage?

Question

I come across two cases where the navigation bar items are selected automatically when I scroll to certain section. How do I achieve that? I'm looking for a solution which is up to date of 2018 and as simple as possible(vanilla JS or without extra JS using bootstrap). I found several post about using jquery to do that but looks like intersection observer is a better approach?

One example is https://insights.stackoverflow.com/survey/2018/, another is http://getbootstrap.com/docs/3.3/javascript/#dropdowns.

Let's assume I have following html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="navbar">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active" id="about-nav-item">
                    <a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item" id="portfolio-nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item" id="contact-nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container" id='about'>
    </div>
    <div class="container" id='portfolio'>
    </div>
    <div class="container" id='contact'>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="code.js"></script>
</body>

</html>

score 0 · Answer 1 · answered Mar 18 '18 at 22:49

To get dynamic navigation links.Create a table and add four coloumns one is per name to display,second one is for link(url),third one is to dispaly icon (fa fa-x) and forth one is for rank to display in order.

1.left link title 2.left link url 3.icon(to dispaly the icon or image ex:fa fa-x) 4.rank(To arrange in order)

Insert these fields in the database table and loop the result in the navbar.

You can also assign this links to users,by this you can restrict access to users*.

Thank you.

score 0 · Accepted Answer · answered Mar 18 '18 at 23:40

where the navigation bar items are selected automatically when I scroll to certain section. How do I achieve that?

This component is called "scrollspy" in Bootstrap 4.

From the docs:

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Reference:

https://getbootstrap.com/docs/4.0/components/scrollspy/

How to make automatic navbar based on section of a webpage?

2 Answers2