Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Highlight active Anchor scroll menu point

Highlight active Anchor scroll menu point

Scheduled Pinned Locked Moved General Discussion
10 Posts 3 Posters 931 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    fifi
    wrote on last edited by
    #1

    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/

    F 1 Reply Last reply
    0
    • F 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/

      F Offline
      F Offline
      fifi
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • F Offline
        F Offline
        fifi
        wrote on last edited by
        #3

        Anyone? Please šŸ™

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          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

          F 1 Reply Last reply
          0
          • RichardR 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

            F Offline
            F Offline
            fifi
            wrote on last edited by
            #5

            @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!

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              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

              1 Reply Last reply
              0
              • F Offline
                F Offline
                fifi
                wrote on last edited by
                #7

                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;  
                }
                
                L 1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by
                  #8

                  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

                  1 Reply Last reply
                  0
                  • F 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;  
                    }
                    
                    L Offline
                    L Offline
                    lorenzomala
                    wrote on last edited by
                    #9

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

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

                    this is the report

                    Schermata 2021-10-15 alle 16.32.11.png

                    Any suggestion?

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

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      A
                      alasdair17
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search