Highlight active item when navigation reaches top of each section

  • Selah

    (@tubescreamer)


    3 years ago

    Hi,

    Plugin works great so far. I’ve set it up like the following:

    View post on imgur.com

    and this is the CSS I wrote:

    #ps2id-dummy-offset{
	height: 155px;
}
a.__mPS2id._mPS2id-h.mPS2id-highlight {
	color: var(--c-active) !important;
}
a.__mPS2id._mPS2id-h.mPS2id-highlight:before {
    width: 100% !important;
}

.mPS2id-target-last{
	color: var(--c-active) !important;
}

    However, I was wondering if it’s possible to make it so that the links only change the highlighted class when the sticky navigation bar reaches the top of the following section. Here’s a video of how the setup looks on my page so far:

    As you can see in the video, when the “Our History” section just barely comes into view, the link “History” becomes highlighted. The effect I was hoping for is to have the link “History” become highlighted when the fixed navigation bar just reaches that “Our History” section, and not before (or not when it scrolls into view). Sort of like this: https://codepen.io/BraisC/pen/mxVwVm

    • This topic was modified 3 years ago by Selah.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Selah

    (@tubescreamer)

    3 years ago

    Also, I just noticed, when I scroll down to a certain point, sometimes two of the links become highlighted at the same time for a couple seconds, then one gets un-highlighted. I have the option “Allow only one element highlighted at a time” as well as “Keep the current element highlighted until the next one comes into view”

    Thread Starter Selah

    (@tubescreamer)

    3 years ago

    Okay, I think i’ve resolved the issues I were having after tinkering with CSS and the plugin settings. It seems to be working now. However, there’s one other thing that was bothering me and I was wondering if it could be fixed.

    I have
    “Keep the current element highlighted until the next one comes into view” and “Highlight by next target” checked to achieve the effect I am looking for, however, I noticed that if I am on the first section of my page and click the last link in the navbar which would scroll to the very last section of the page, as it scrolls down to the last section, it highlights all the links in between. Is there any way to automatically set the highlight class to the clicked link so all the links in between don’t show the highlight color when it’s scrolling through?

    Plugin Author malihu

    (@malihu)

    3 years ago

    Hi,

    About the last question I can’t really say unless I see your site/page. Can you post your link so I can check what happens?

    Do you mean the links get highlighted momentarily as the page scrolls down? This is normal and cannot change. If you want to only highlight the clicked link you can use the mPS2id-clicked class (instead of mPS2id-highlight). Not sure if this is what you want(?)

    Also, about the first question:

    The highlight feature of the plugin is completely user-centric. It indicates to the user which section he/she is currently viewing. In other words, this feature is about UX, it’s not about menu/page design.

    For example, if “section 2” occupies 3/4 of the viewport, while “section 1” occupies 1/4 of the viewport at the top, the user is viewing “section 2” (not “section 1”), thus “section 2” link gets highlighted.

    This is how the highlight feature of the plugin works and you can’t really change it with some option or setting.

    Hope this helps

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Highlight active item when navigation reaches top of each section’ is closed to new replies.