Sidebar - Sticky element on scroll

Philip is freelancer

If you feel the content is useful. Thank for me with a coffee ๐Ÿ˜Š

December 09, 2021 09:03 am

Brizy allows sticking of fixed elements. However, you cannot create a sidebar with the functionality of in brizy. I researched some javascript libraries and found one "ScrollMagic" which can work perfectly with bizy cloud.

Brizy allows sticking of fixed elements. However, you cannot create a sidebar with the functionality of in brizy. I researched some javascript libraries and found one "ScrollMagic" which can work perfectly with bizy cloud.

Demo: ( on Desktop) https://webtricks.brizy.site/sticky-scrolling

Donate 1 cup of coffee to remove the Dofollow link attached to the footer. Here

Steps:

  1. Create 2 columns
  2. The first column contains the website content, the second column contains the content that is fixed when scrolling.
  3. Set the class name for column 2 ".contain-details"
  4. Add the library "ScrollMagic" before the element to stick
  5. Set the class name for the element to stick ".my-sidebar"
  6. Add js* after the element to stick Save

Code:

Enter code that will be injected into the 'head' tag

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

Enter code that will be injected into the 'footer' tag

<div class="webtricks"><a style="position: absolute; font-size: 12px; height: 20px; width: 150px; bottom: 0; right: 0;" href="https://webcode24h.com/">webcode24h.com</a></div>

<script src="https://cdn.jsdelivr.net/gh/webcode24h/libs@main/brizyplus/SidebarScroll/sidebar-scroll-1.3.js">

</script>


If you feel the content is useful. Thank for me with a coffee ๐Ÿ˜Š