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. Sticky position with jQuery

Sticky position with jQuery

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 542 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.
  • R Offline
    R Offline
    raphael75011
    wrote on last edited by
    #1

    Re: Text Element Sticky: stick to top on scroll

    Hello,

    I am using a javascript fonction that I found on the forum to
    use a sticky position on a block of text. It is working but not totally. When you scroll up there is a bug, as you can see here: http://wcnhxpk.cluster028.hosting.ovh.net/projet-1
    Do you have a solution to fix it?
    Thank you so much,

    Raphaël.

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

      Dear @raphael75011

      I believe i can see it :)
      but just to be correct it is obviously because it jumps right?

      The Class "Sticky" is only being added when you leave the top of the page, something about it being completely '0' to the top causes the problem but as soon as move - it kicks into action!

      Is there anything in your Javascript you can see at first glance that could be causing this? or any Solution you see easily?

      Best wishes and thank you for using Lay Theme

      Sincerely
      Richard

      1 Reply Last reply
      0
      • R Offline
        R Offline
        raphael75011
        wrote on last edited by
        #3

        Hi @Richard-Keith

        Thanks for your kind answer. I have some notion of html/css unfortunately I don't know how to write javascript. Here is the function, maybe you know more than me.
        Best,

        Raphaël.

        <script>

        jQuery(document).ready(function($) {

        function sticky()
        {
            var window_top=$(window).scrollTop();
            var top_position=$('body').offset().top;
            var element_to_stick=$('#header');
            
            if (window_top > top_position) {
                element_to_stick.addClass('sticky');
            } else {
                element_to_stick.removeClass('sticky');
            }
        }
        $(window).scroll(sticky);
        sticky();
        

        });
        </script>

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

          Dear @raphael75011

          Hi Raphael sorry for the late reply

          Do you still need help with your problem?
          Remember when using JS that we have to change the " $ " to " jQuery "

          Thank you for your patience and apologies once again

          Sincerely
          Richard

          1 Reply Last reply
          0
          • S Offline
            S Offline
            Sophie1000
            wrote on last edited by
            #5

            Hi @raphael75011 does it work for you ?
            I'm using the same jQuery function and to change the $ to jQuery doesnt seems to change anything.

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

              Dear @Sophie1000

              Am i correct from your recent Thread this is solved?

              http://laythemeforum.com:4567/topic/6672/sticky-element?_=1616638900292

              Best wishes

              Richard

              S 1 Reply Last reply
              0
              • RichardR Richard

                Dear @Sophie1000

                Am i correct from your recent Thread this is solved?

                http://laythemeforum.com:4567/topic/6672/sticky-element?_=1616638900292

                Best wishes

                Richard

                S Offline
                S Offline
                Sophie1000
                wrote on last edited by
                #7

                @Richard yep, thank you :)

                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
                arminunruhA
                arminunruh
                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