drakmail's solution to "Convert jQuery to vanilla JS"

Can you check?<\/p>\n

function<\/span> <\/span>checkOffset<\/span>()<\/span> <\/span>{<\/span>\n  <\/span>const<\/span> <\/span>floatingGallery<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'.product_cat-bound-rugs', '.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images');<\/span>\n  <\/span>const<\/span> <\/span>offset<\/span> <\/span>=<\/span> <\/span>floatingGallery<\/span>.<\/span>getBoundingClientRect<\/span>()<\/span>\n  <\/span>if<\/span>(<\/span>offset<\/span>.<\/span>top<\/span> <\/span>+<\/span> <\/span>window<\/span>.<\/span>scrollY<\/span> <\/span>+<\/span> <\/span>floatingGallery<\/span>.<\/span>innerHeight<\/span> <\/span>>=<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'.sfb-footer-bar').getBoundingClientRect().top + window.scrollY - 10) {<\/span>\n    <\/span>floatingGallery<\/span>.<\/span>style<\/span>.<\/span>position<\/span> <\/span>=<\/span> <\/span>'absolute';<\/span>\n  <\/span>}<\/span>\n  <\/span>if<\/span> <\/span>(<\/span>document<\/span>.<\/span>scrollTop<\/span> <\/span>+<\/span> <\/span>window<\/span>.<\/span>innerHeight<\/span> <\/span><<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'.sfb-footer-bar').getBoundingClientRect().top + window.scrollY) {<\/span>\n    <\/span>floatingGallery<\/span>.<\/span>style<\/span>.<\/span>position<\/span> <\/span>=<\/span> <\/span>'fixed';<\/span>\n  <\/span>}<\/span>\n}<\/span>\n\ndocument<\/span>.<\/span>on<\/span>(<\/span>'scroll', function() {<\/span>\n  <\/span>checkOffset<\/span>();<\/span>\n});<\/span>\n<\/pre><\/div>
Can you check? ``` 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 = floatingGallery.getBoundingClientRect() if(offset.top + window.scrollY + floatingGallery.innerHeight >= document.querySelector('.sfb-footer-bar').getBoundingClientRect().top + window.scrollY - 10) { floatingGallery.style.position = 'absolute'; } if (document.scrollTop + window.innerHeight < document.querySelector('.sfb-footer-bar').getBoundingClientRect().top + window.scrollY) { floatingGallery.style.position = 'fixed'; } } document.onaddEventListener('scroll', function() { checkOffset(); }); ```
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.getBoundingClientRect() if(offset.top + window.scrollY + floatingGallery.innerHeight >= document.querySelector('.sfb-footer-bar').getBoundingClientRect().top + window.scrollY - 10) { floatingGallery.style.position = 'absolute'; } ')); if (offset.top + getHeight(floatingGallery) >= footerOffset.top - 10) { floatingGallery.style.position = 'absolute'; } if (window.pageYOffset + window.innerHeight < footerOffset.top) { floatingGallery.style.position = 'fixed'; } } document.scrollTop + window.innerHeight < document.querySelector('.sfb-footer-bar').getBoundingClientRect().top + window.scrollY) { floatingGallery.style.position = 'fixed'; } } document.addEventListener('scroll', function() { checkOffset(); }); ```

User: drakmail

Question: Convert jQuery to vanilla JS

Back to question