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. Placing sticky element in the gridder

Placing sticky element in the gridder

Scheduled Pinned Locked Moved General Discussion
15 Posts 6 Posters 1.2k 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.
  • B Offline
    B Offline
    bb_daniel
    wrote on last edited by
    #1

    Dear Armin, dear community,

    has anyone ever tried to place an element in the gridder that gets sticky at a certain scroll-position?

    I want to create this effect:
    https://www.w3schools.com/howto/howto_css_sticky_element.asp

    It works fine when I'm writing the code (position: sticky; top:0;) straight into the HTML and CSS fields. But when I'm applying the sticky class to an Element that lies in the gridder it doesn't seem to work.

    Is there a work-around or something else I have to pay attention to?
    Or maybe an alternate jQuery solution?

    Best, Daniel

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

      Dear @bb_daniel
      I will check with Armin if this is actually possible in the Gridder.
      I also did not manage to make it work right now.

      For sure there are jQuery solutions around.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • B Offline
        B Offline
        bb_daniel
        wrote on last edited by
        #3

        @mariusjopen
        Thanks a lot!
        Meanwhile I´ll keep looking for alternative solutions.
        ✌🏻

        Best, Daniel

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

          Perfect!

          www.mariusjopen.world

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

            Maybe because #grid has overflow:hidden; and that is why it doesn't work.

            http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

            in your custom css write in "lay options" -> "custom html and css":

            #grid{
            overflow: auto;
            }
            
            B 1 Reply Last reply
            0
            • arminunruhA arminunruh

              Maybe because #grid has overflow:hidden; and that is why it doesn't work.

              http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

              in your custom css write in "lay options" -> "custom html and css":

              #grid{
              overflow: auto;
              }
              
              B Offline
              B Offline
              bb_daniel
              wrote on last edited by
              #6

              @arminunruh
              Hey, thanks for the hint! I tried, but couldn't make it work anyway.
              Would be really cool, to have this feature.
              But I´ll keep searching. Maybe Im doin something wrong…

              Thank You✌️

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

                Dear @bb_daniel

                #grid{
                overflow: auto !important;
                }
                

                Does that help?

                Best!

                Marius

                www.mariusjopen.world

                B 1 Reply Last reply
                0
                • mariusjopenM mariusjopen

                  Dear @bb_daniel

                  #grid{
                  overflow: auto !important;
                  }
                  

                  Does that help?

                  Best!

                  Marius

                  B Offline
                  B Offline
                  bb_daniel
                  wrote on last edited by
                  #8

                  @mariusjopen
                  unfortunately not.
                  Dis you guys make it work?

                  Best, Daniel

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

                    Dear @bb_daniel
                    I would solve it with jQuery and not Css:
                    https://www.medianotions.de/webdesign-blog/jquery/sticky-header-mit-jquery/

                    Hope that helps as well :-)

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply
                    0
                    • BaptisteB Offline
                      BaptisteB Offline
                      Baptiste
                      wrote on last edited by Baptiste
                      #10

                      Hey guys,
                      Does anyone found something, I tried some stuff with jQuery but can't find a solution...

                      Tried that : https://jsfiddle.net/julienfrog/p87jmj61/1/
                      But I let you know if I find something...

                      Thanks in advance,
                      B.

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

                        Der @Baptiste
                        did you have a look here?
                        http://laytheme.com/documentation.html#custom-javascript
                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply
                        0
                        • BaptisteB Offline
                          BaptisteB Offline
                          Baptiste
                          wrote on last edited by
                          #12

                          Hey @mariusjopen ,
                          Yes, you mean the idea of using "jQuery" instead of "$"?
                          Already did but I'm working on it today, hope i'll fix it.

                          I'll let you know if I find something and let me know if you find it too.
                          Thanks a lot.

                          Baptiste.

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

                            Dear @Baptiste
                            not only the jQuery. Also how functions get loaded. Have a close look.

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply
                            0
                            • K Offline
                              K Offline
                              koliveros
                              wrote on last edited by
                              #14

                              @Baptiste @bb_daniel any chance you guys were able to get this to work? trying to add to a new site im working on and cant seem to get it to work, lmk ty

                              E 1 Reply Last reply
                              0
                              • K koliveros

                                @Baptiste @bb_daniel any chance you guys were able to get this to work? trying to add to a new site im working on and cant seem to get it to work, lmk ty

                                E Offline
                                E Offline
                                egorkraft
                                wrote on last edited by egorkraft
                                #15

                                @koliveros Hi! How's your progress? Have you managed to get a way to do it? Thanks

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