Lay Theme Forum

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

    Scripts with scroll functions have stopped working on several sites

    Bug Reports
    3
    3
    51
    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
      jorgenbry last edited by

      Hi. On two of my Lay theme sites, javascript scroll functions that worked when making the sites suddenly have suddenly stopped working. All of these three code snippets have stopped working. Do you have any idea why, and how to make them work again? All code is added with the Custom CSS and HTML settings.

      1 – On jimmylinus.com, the following code made the the About-link in second-menu offset above the footer when scrolling down.

      <script>
      $(window).scroll(() => {
          const footerToTop = $('#footer-region').position().top;
          const scrollTop = $(document).scrollTop() + $(window).height();
          const difference = scrollTop - footerToTop;
          const bottomValue = scrollTop > footerToTop ? difference : 0;
          $('nav.second_menu').css('bottom', bottomValue+25);
      });
      </script>
      

      2 – On the same site, the next and previous project arrows (as text) gradually increased in opacity when scrolling down. Now they are only visible on hover. This is the code:

      <script>
               $(document).ready(function(){ 
                  $(window).scroll(function(){ 
                      $('.project-arrow').css("opacity", 0+ $(window).scrollTop() / $(document).height() ) 
                  }) 
              }) 
      </script>
      

      3 – And on another site, colin.no, thumbnails for previous and next projects appeared after scrolling 90% of the height. This is the code:

      <script>
      
      $(document).scroll(function() {
        var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
        if (scrollPercent > 90) {
          $('.project-arrow').fadeIn();
        } else {
          $('.project-arrow').fadeOut();
        }
      });
      
      </script>
      

      Please let me know how to fix these!

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

        Dear @jorgenbry

        Thank you for your patience
        I will forward this so that we can take a closer look

        Best wishes
        Richard

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

          hey please use 'jQuery' instead of '$' (without the '')

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

          Try this to fix issues 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

          G
          S

          Recent Topics

          • Carousel is not showing

          • S

            Image hover -> Image on image

          • C

            centred Carousel fixed width and proportions

          • text underline

          laytheme.com