Search jQuery

jQuery Forum

navbar class active impresice

in Getting Started • 1 year ago

Hi,

The navbar (bootstrap) holds several links. When clicking on a link the page does! scroll to the right location but the upper <section> link remains active.

I have to scroll down another ~100px manually to have the correct (next link) active.

I have tried all sorts of things, like moving the id up/down the section, or set and .anchor with padding/margin-top. But nothing worked.

How do I fix this?

Cheerz!

Replies(7)

jakecigar

Re: navbar class active impresice

1 year ago

Can you prepare a demo? Maybe in https://jsfiddle.net ?

I assume that by "active", you mean "visible".

JΛ̊KE

timmy01

Re: navbar class active impresice

1 year ago

I could be the code is rather extensive so i think it would be better to explain with a screenshot:

nr. 1 shows an active "Page 1" link, which is incorrect. Because it is page 2 we are looking at.

<- IMPR

nr. 2 shows the output as a result of nr 1

nr 3. show the correct active link (Page 2). But this is achieved but scrolling up the page.

You can see IMPR in the background.

So, what i need is a situation shown on nr 1. but with #page2 active.

jakecigar

Re: navbar class active impresice

1 year ago

By making a demo, you remove the parts that don't apply. Make a tiny demo. We need to see the HTML.

What code is adding class active?

JΛ̊KE

jakecigar

Re: navbar class active impresice

1 year ago

Maybe you need something like https://jsfiddle.net/jakecigar/szm6kg8e/,

JΛ̊KE

timmy01

Re: navbar class active impresice

1 year ago

Hi Jake!

I was able to reverse-engineer this back to the point that the tag <data-spy="scroll"> is 'at least' involved.

example

If you look at the example, you can see that when scrolling down from section1 to section2. You will see than as soon as the purple background (section 2) hits the bottom of the navbar, the menu:link:section 2 will be activated.

In my case i have to scroll down ~150px more to make that happen. What exactly causes this, is probably css related, i assume... What remains the main question.

timmy01