Position:sticky

Hi,
On this URL: https://www.varamedia.be/website-laten-maken/restaurants/ I want the image of the laptop being sticky (when scrolling down the icon list).
I tried everything but it just does not work. My CSS knowledge has a good foundation but it's not advanced. Therefore I request your support.
Thanks in advance

  • Ashik
    • Staff

    Hi Jeroen,

    Thank you for contacting WPMU DEV support. Hope you're doing well today.

    Can you please open support access for us? So, we can give a closer look into it and help you to achieve your goal. Visit this https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5 and follow the instructions to open support access. Let us know here once it's granted, cause we don't get any notification about it.

    Please note that to include the above feature in question, we may include an external jQuery library.

    Feel free to reply here if you've any more questions or concerns. Looking forward to hearing from you.

    Regards,
    Ashik

    • Jeroen
      • New Recruit

      Hi Ashik,
      The support access has been granted.
      Thanks for your help.
      Would it be possible to also explain how you've done it? I am very eager to learn.
      PS: the reply below you wrote to ODaisyRose is probably meant for another thread, is it?

  • Ashik
    • Staff

    Hi Jeroen,

    Thank you for granting support access.

    I've done it for you. I've included a jQuery library. Here is library site http://leafo.net/sticky-kit/. Added the library code in child-theme function.php. Also added 2 lines of custom code to init the library and add an ID attribute to the sticky element. Below is the code

    //custom code by WPMU DEV staff
    $("#stickyImage").parents(".column_parent").attr("id", "sidebar");
    $("#sidebar").stick_in_parent({
    	offset_top: 5
    });

    Feel free to reply here if you've any more questions or concerns. Have a great day.

    Regards,
    Ashik

    • Jeroen
      • New Recruit

      hi Ashik,
      Thanks, but the mobile responsiveness is not what is should be (the image overlaps with the text in mobile).
      Besides that I'd like to know why position:sticky is not possible with CSS according to you? I rather have CSS over jQuery as I have more knowledge of this, and I not only want the issue fixed but I also want to learn how, because I have more other similar cases I want to solve myself.
      Thanks for helping out!
      Jeroen

  • Ashik
    • Staff

    Hi Jeroen,

    Thank you for replying back with your query.

    The issue is fixed on mobile now.

    I'd like to know why position:sticky is not possible with CSS

    Using CSS it's not possible to spot when you're in the right area and the element should sticky now and when you're not. But using Javascript it's possible to track browser, mouse, keyboard movement, current window position and more on what the sticky event is triggering here actually. Using CSS it's possible to stick an element that doesn't depend on any specific event.

    want to learn how

    The jQuery library (http://leafo.net/sticky-kit/) what I've used in your site has all the necessary functions those need to stick an element based on the event. So, you can just tell the plugin when and which element should stick, the plugin will do the rest. You can check their documentation http://leafo.net/sticky-kit/#reference.

    Feel free to reply here if you've any more questions or concerns. Have a great day.

    Regards,
    Ashik

  • Jeroen
    • New Recruit

    Hi Ashik,

    Thanks, could you tell me precisely where you have added code (and which code) so I can retrieve this? I can't find it in custom css, so it it elsewhere planted?

    Your help really was valuable but also for learning matters I still like to master position:sticky; with CSS without any jquery.
    And if that particular image is not position:sticky; eligible I'd like to figure out why. But some earlier tests have proven that it works (I already did it based on a stackoverflow question I asked, see below, but the solution never was stable and also not mobile friendly).
    So I just like to dig deeper into the thread that already has started on Stackoverflow, but never got finished after I again ran into troubles when applying the methods described in the thread over there.
    Thanks for help.
    Jeroen

    https://stackoverflow.com/questions/54029551/sticky-element-not-responding-issue-that-has-not-been-documented-yet-apparently

  • Ashik
    • Staff

    Hi Jeroen,

    Thank you for replying back with your query.

    As I said in the previous message I've added this code in child theme function.php. It's jQuery and PHP code, not CSS. Also, to know more about position:sticky you can follow this article https://alligator.io/css/position-sticky/.

    In your case, the scenario is a bit different. You've used page builder to design your page. And page builder designs a section with own markup style. That quite different what is required to work position:sitcky rules. Check your site markup through browser inspect element method.

    Feel free to reply here if you've any more questions or concerns. Have a great day.

    Regards,
    Ashik

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.