Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Link color on fixed nav based on current row

    General Discussion
    2
    7
    267
    Loading More Posts
    • 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.
    • J
      jspinkus last edited by jspinkus

      Hi, how are you?

      I'm using this code to change a link color based on current row, it works okey when the fullscreen slider is deactivated, but I want to use this function with the fullscreen slider on and its not working. Is there a way to do this?

      var offset = 50;
      var $blackRows;
      var $nav;

      Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
      $blackRows = jQuery(".blackrow");
      $nav = jQuery("nav");
      $nav.removeClass("white");
      });

      jQuery(document).on("scroll", function(){
      $blackRows.each(function(){
      var rect = this.getBoundingClientRect();
      if(rect.top - offset < 0 && rect.bottom - offset > 0){
      $nav.addClass("white");
      return false;
      }else{
      $nav.removeClass("white");
      }
      });
      });

      Thanks as always!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @jspinkus
        can you provide a link?

        Best!

        :-)

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • J
          jspinkus last edited by

          Hi @mariusjopen
          here is the link with the fullscreen slider activated:
          http://studio.juanpinkus.com/

          I also did a copy of the same page without the fullscreen slider so that you can see the changing link working when you scroll down to the second row, is the "About" at the top-right:
          http://studio.juanpinkus.com/selected-work-2

          hope it's easy to solve

          Thanks!

          1 Reply Last reply Reply Quote 0
          • J
            jspinkus last edited by

            Hi @mariusjopen

            Any idea about this?

            Thank you! :)

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @jspinkus
              you are lucky. That is an easy one.
              Each slide has an own class in the body.
              For example: For slide number 4: fp-viewing-4

              So you can just use this as a parent for your CUSTOM CSS and have each slide with a different CSS.

              Hope that helps!

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • J
                jspinkus last edited by

                Hey @mariusjopen
                thanks for that!
                It works perfectly, and with pure css! don't need the script any more.

                Best!
                Juan

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Dear @jspinkus
                  great! Happy to hear!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Before you post

                  Use the Search Feature. Maybe there is already a solution to your issue.

                  1. Update Lay Theme and all Lay Theme Addons
                  2. Disable all Plugins
                  3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                  4. Now see if your problem solved itself
                  5. Go here, see if your problem is listed here:
                  Troubleshooting

                  When you post:
                  1. Post a link to where the problem is
                  2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                  Thanks!

                  Online Users

                  Recent Topics

                  • N

                    website blank.

                  • S

                    Theme crashed - because of Polylang?

                  • S

                    New fade-in / opacity bug?

                  • A

                    Unable to update lay theme / to login wp admin

                  laytheme.com