Highlight active Anchor scroll menu point

[fifi]

Re: Activate Menu Items by Scrolling / Anchorscroll

Hello to all of you! I really enjoy LayTheme so far. Great work!
Right now i am trying to fix a Menu navigation Issue on my Onepage website.

SITUATION:
I sucessfully gave specific rows of my website an ID and linked this ID in the Fixed Menue on the left. This works very nice.

PROBLEM:
I would like to:

1. Highlight the Active Menu Point.
2. Highlight it automaticcaly by scrolling to it.

Right now only the "MENU POINT MOUSE OVER" is working but the "MENU POINT ACTIVE" is not.
I tryed the Script in the Link above but i have absolutely no clue about coding so i just copyd it and its not working.
I bet its an easy solution but i dont know how.

Any help is appreciated! Thank you in advance!

LINK TO WEBSITE: https://felixahn.de/

[fifi]

@fifi here is an example of what i am trying to achive: https://lexic-on.ru/

[fifi]

Anyone? Please 🙏

[Richard]

Dear @fifi

Sorry for the delay :)
The example link given is not a Lay Theme website though i understand this is just showing what you want to achieve.

Just to be on the same page, what is the exact code you have already applied, if you could post it please.

Talk soon & have a wonderful day :)
Richard

[fifi]

@Richard-K
Hello Richard! Thanks a lot for your answer!
Right now i dont have any custom code applied. However i tried the following code from @hx but deleted it again, since it didn't worked on my site. :
<script>
jQuery(function ($) {
$('nav a').addClass('menu-active')
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.menu-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.menu-active').removeClass('menu-active')
$('nav a').eq(i).addClass('menu-active')
}
})
});
});
</script>

and this custom css:

nav a.menu-active {
color: red;
}

It just turned my whole menu red.
I know the example page is not made with laytheme. i just wanted to show the behavior i want to achieve.
I was hoping you could either help me to make the code from @hx work or point me in a direction how to achieve it on my own.
Thanks a lot!

[Richard]

Dear @fifi

Sorry for the delay, i noticed in the reference thread provided the:

$('nav a').addClass('menu-active')

Should be removed - I believe this is why you are getting the 'all red' because the 'red' CSS is applied to all before any further action has taken place on the page.

<script>
jQuery(function ($) {
$('nav a').addClass('menu-active')
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.menu-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.menu-active').removeClass('menu-active')
$('nav a').eq(i).addClass('menu-active')
}
})
});
});
</script>

Within the code you are using currently, this code is still present,

Hope this helps get you further :)

Best wishes
Richard

[fifi]

Thank you Richard.
I finally got it to work. I basically had to learn the beginner html CSS and JS to get it working.
Here is the code i used in the end. Its basically the same as you and @hx used. I just added some notes and Debug lines that helped me understanding the code. I hope its easier for the next one and that you integrate this feature in an Update?

<script>// Make sure every ROW on your Page in which you want to have a menu point has an CLASS called "menu-section" and an ID corresponding to the link in the menu.
jQuery(function ($) {
    $(window).scroll(function () {
        $('nav.primary a').addClass('menu-active') //"nav a" only works if you dont have a phone layout. Better to use "nav.primary a"
        var scrollPos = $(window).scrollTop(); //current scroll position from top of document
        //console.log("START");
        //console.log("SP" + scrollPos);
        $('.menu-section').each(function (i) { //".menu-section" links to the class you gave the Item on your page.
            //console.log( index + ": " + $( this ).text() );
            var topPosi = $(this).offset().top; //topPos is the number of pixels from the top of the closest relatively positioned parent element.
            //console.log ($(this));
            //console.log("TP" + topPosi);
            //console.log("INTERMEDIATE");
                if ((topPosi - scrollPos) <= 500) { //The Number is a Treshold for the Position at which the Menu Point switches.
                    $('.menu-active').removeClass('menu-active');
                    $('nav.primary a').eq(i).addClass('menu-active');
                    //console.log("END_if_true");
                }

})
});
});
</script>

And the corresponding CSS:

.primary .menu-active {
    color: white;  
}

[Richard]

Dear @fifi

Amazing! :)
Thanks for the Update - This will help others in the future.

Have a wonderful day & thank you for using Lay Theme.

Best
Richard

[lorenzomala]

@fifi I try to use this script but doesn't work on my website.

//console.log( index + ": " +$( this ).text() );

this is the report

Any suggestion?

website link: https://www.terraterrastudio.it

[Richard]

Dear Lorenzo

@lorenzomala

Javascript or jQuery must first be placed inside a "newpage event" when adding to Lay Theme https://laytheme.com/documentation.html#custom-javascript

Newpage Events
Because your Lay Theme website is a "Single Page" JavaScript application you cannot just use jQuery(document).ready(…) to execute your js because the ready event only fires once when the website loads the first time.

Since Lay Theme 1.056 you can use a JavaScript event to execute your own JavaScript whenever a project, page or category is visited. The event is called "newpageshown". It will trigger when a new project, page or category has rendered.

window.laytheme.on("newpageshown", function(layoutObj, type, obj){

// your code would go here

});

• layoutObj is a an empty object. This used to contain the - layout's JSON, but was deprecated.
• type can be either "project", "page" or "category".
• obj is WordPress' post, page or term object. These objects contain general information like ids and slugs.

---

Any jQuery '$' symbols must be written in full "jQuery" e.g

$(addClass); becomes jQuery(addClass);

---

Custom Code is most likely to be placed in "Custom <head> Content" in > Lay Options > Custom CSS & HTML >

---

Best wishes Lorenzo & have a great day 🏖

Richard