CODEWITHSUNDEEP
jqueryhtmlcss
user2407127
user2407127

Reputation: 9

How to use the bootstrap's scrollspy function with a non bootstrap navbar

this is my first website without a CMS and I am little lost with jQuery. I'm just trying to activate the elements of my fixed navbar depending on the position where the user is. I am building my site with bootstrap and that is the reason I am using the scrollspy function. If anybody can help me doing it in an other way would be great. I have created a fiddle with the html, css and jquery code here I also write you down here the code. Thanks in advance.

<body data-spy="scroll" data-target="#top-menu">
<div>
<ul id="top-menu" style="background: green;">
<li><a class="active" href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</div>
<br><br>

<div id="home">
<p>This is home section</p>
</div>
<div id="about">
<p>About</p>
</div>
<div id="portfolio">
<p>This is the portfolio</p>
</div>
</body>

And the jquery is here

Upvotes: 0

Views: 2216

Answers (1)

Yury Andreykovich
Yury Andreykovich

Reputation: 46

You should add "nav" class for the ul element in your code and set for the data-target value id of the parent div element of the list.

Smth like the code below:

<body data-spy="scroll" data-target="#top-menu">
    <div id="top-menu">
    <ul style="background: green;" class="nav">
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    </ul>
    </div>
    <br><br>

    <div id="home">
    <p>This is home section</p>
    </div>
    <div id="about">
    <p>About</p>
    </div>
    <div id="portfolio">
    <p>This is the portfolio</p>
    </div>
</body>

Upvotes: 1

Related Questions