Scrolling back up does not trigger the previous highlight

  • iveyb

    (@iveyb)


    4 years, 5 months ago

    Hey y’all!

    I’m working on a page that has several large sections, each of which contains multiple rows. The key ids can each only go on one row, so there are id-less rows in between them. See mockup code below for clarity:

    <div class=”row” id=”ch1″>
    <h2>Chapter 1</h2>
    </div>
    <div class=”row”>
    <p>Lorem ipsum</p>

    </div>
    <div class=”row” id=”ch2″>
    <h2>Chapter 2</h2>
    </div>

    As I scroll down from .row#ch1 into the row without id, the menu highlight for #ch1 remains highlighted. As I reach .row#ch2, the menu highlight for #ch2 becomes highlighted. This is the behavior I want – no problems here.

    The problem occurs when I start to scroll /backwards/. If I jump to .row#ch2 and then scroll back into the row without id – which contains content belonging to Chapter 1 – the menu highlight for #ch2 remains highlighted. It’s as if it’s doing the same behavior in reverse: keep #ch2 highlighted until you reach .row#ch1.

    Is there a way to set the settings so that I can scroll back up into a section and have that section’s top row id highlighted… without putting all of the Chapter 1 content into the one .row#ch1 row? (The content layout is complex and won’t work without multiple rows.) I’ve been digging through the documentation and while it helped me set up the initial behavior for scrolling down, I can’t find how to make it work scrolling up.

    Thank you!

Viewing 1 replies (of 1 total)
  • Plugin Author malihu

    (@malihu)

    4 years, 5 months ago

    Hello,

    I’m guessing you enabled the “Keep the current element highlighted until the next one comes into view” option, correct?

    In such case you can’t really do much except maybe using “mPS2id-highlight-last” class (instead of “mPS2id-highlight”) in your CSS. This of course will work only when “Allow only one highlighted element at a time” option is disabled and perhaps when a specific “Highlight selector(s)” option value is set (depends on your content and page layout).

    This said, the best way is to have one wrapper element with the id that’ll contain all section elements but if you think such layout won’t work for you, try the suggestion above.

Viewing 1 replies (of 1 total)

The topic ‘Scrolling back up does not trigger the previous highlight’ is closed to new replies.