htmlcsswordpresswoocommerce

Make Product Image gallery Sticky(fixed) on WooCommerce Single Product Page


I want to make wooCommerce product image gallery section, to be sticky till footer as it happened on shopify. Similar like this, https://ninjatransfers.com/products/premium-dtf-gang-sheets

for that i tried position: absolute and position sticky both aswell, like it guided in many tutorials but it wont work.

Then i create my own sample html as in this fiddle

div.sticky {
  position:relative;
  width: 100%;
}
p.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how  sticky positioning works.</p>

<div class="sticky">
    <div style="float:left;width:45%">
    <p class="sticky">I will stick to the screen when you reach my scroll position
      </p>
  </div>
    <div style="float:right;width:45%;">
    <p>Some example text..</p>
    <h2>Scroll back up again to "remove" the sticky position.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim </p>
  </div>
</div>

<div style="float:left;width:100%">
  <p>BALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFAS.</p>
</div>

with the same structure to see how it works with position sticky.

I noticed until there is No 2 Columns in row, it works. But when make 2 columns and put them in some div for row, it stop working.

Please see the Fiddle and guide me what i am missing??


Solution

  • Don't use float for creating layouts. I just removed float and added display: flex to the row-container, and now it works fine. display: flex has flex-direction: row by default, thus creating 2 columns.

    div.sticky {
      position: relative;
      width: 100%;
      display: flex;
    }
    
    p.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 50px;
      display: block;
      background-color: yellow;
      padding: 50px;
      font-size: 20px;
    }
    <h2>Sticky Element: Scroll Down to See the Effect</h2>
    <p>Scroll down this page to see how sticky positioning works.</p>
    
    <div class="sticky">
      <div style="width:45%">
        <p class="sticky">I will stick to the screen when you reach my scroll position
        </p>
      </div>
      <div style="width:45%;">
        <p>Some example text..</p>
        <h2>Scroll back up again to "remove" the sticky position.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
          luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
          nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
          aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.ullamcorper ipsum dignissim ac. In at libero
          sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
          ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ullamcorper ipsum dignissim ac. In at libero
          sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
          ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim </p>
      </div>
    </div>
    
    <div style="float:left;width:100%">
      <p>BALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
        ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
        ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
        ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
        ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
        ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFAS.</p>
    </div>