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. Link color on fixed nav based on current row

Link color on fixed nav based on current row

Scheduled Pinned Locked Moved General Discussion
7 Posts 2 Posters 385 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.
  • J Offline
    J Offline
    jspinkus
    wrote on last edited by jspinkus
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @jspinkus
      can you provide a link?

      Best!

      :-)

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • J Offline
        J Offline
        jspinkus
        wrote on last edited by
        #3

        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
        0
        • J Offline
          J Offline
          jspinkus
          wrote on last edited by
          #4

          Hi @mariusjopen

          Any idea about this?

          Thank you! :)

          1 Reply Last reply
          0
          • mariusjopenM Offline
            mariusjopenM Offline
            mariusjopen
            Global Moderator
            wrote on last edited by
            #5

            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
            0
            • J Offline
              J Offline
              jspinkus
              wrote on last edited by
              #6

              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
              0
              • mariusjopenM Offline
                mariusjopenM Offline
                mariusjopen
                Global Moderator
                wrote on last edited by
                #7

                Dear @jspinkus
                great! Happy to hear!

                Marius

                www.mariusjopen.world

                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
                J
                jaredh
                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