Convert jQuery to vanilla JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

If anyone could convert this to vanilla JS for this bounty would be great :)

function checkOffset() {
const floatingGallery = $('.product_cat-bound-rugs', '.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images');
if($(floatingGallery).offset().top + $(floatingGallery).height() >= $('.sfb-footer-bar').offset().top - 10){
$(floatingGallery).css('position', 'absolute');
}
if($(document).scrollTop() + window.innerHeight < $('.sfb-footer-bar').offset().top){
$(floatingGallery).css('position', 'fixed');
}
}
$(document).scroll(function() {
checkOffset();
});

awarded to drakmail

Crowdsource coding tasks.

1 Solution

Winning solution

Can you check?

function getOffset(element)
{
    if (!element.getClientRects().length)
    {
      return { top: 0, left: 0 };
    }

    let rect = element.getBoundingClientRect();
    let win = element.ownerDocument.defaultView;
    return (
    {
      top: rect.top + win.pageYOffset,
      left: rect.left + win.pageXOffset
    });   
}

function getHeight(el) {
    return parseFloat(getComputedStyle(el, null).height.replace("px", ""))
}

function checkOffset() {
  const floatingGallery = document.querySelector('.product_cat-bound-rugs .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images');
  const offset = getOffset(floatingGallery);
  const footerOffset = getOffset(document.querySelector('.sfb-footer-bar'));
  if (offset.top + getHeight(floatingGallery) >= footerOffset.top - 10) {
    floatingGallery.style.position = 'absolute';
  }
  if (window.pageYOffset + window.innerHeight < footerOffset.top) {
    floatingGallery.style.position = 'fixed';
  }
}

document.addEventListener('scroll', function() {
  checkOffset();
});
Hi thanks for reply. It doesn't seem to work. this is the original jsfiddle that I took it from http://jsfiddle.net/Kkv7X and here is one with your code https://jsfiddle.net/shameabouttheweather/sgwhmknu/2/
shameabouttheweather 3 months ago
Thank you for jsfiddle, fixed the solution. Also you can check it here: https://jsfiddle.net/6xetjw2m/
drakmail 3 months ago
That works perfect! Thanks very much
shameabouttheweather 3 months ago