Last active
February 22, 2022 06:54
-
-
Save whywilson/e6773f34e7e8f91734714485fbeec4ec to your computer and use it in GitHub Desktop.
Make product tabs sticky to the bottom of header in WooCommerce Store.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Load the script below after website loaded or in the custom product layout template. --> | |
| <script> | |
| let sticky_element = ".woocommerce-tabs ul.tabs.wc-tabs.product-tabs" | |
| let sticky_element_top = ".woocommerce-tabs.tabbed-content" | |
| let has_adminbar = jQuery("#wpadminbar").length | |
| adminbar_height = has_adminbar == 1 ? jQuery("#wpadminbar").height() : 0 | |
| window.addEventListener("scroll", function() { | |
| let header_height = jQuery("#masthead").height() + adminbar_height | |
| let product_tabs_offset_height = jQuery(sticky_element).offset().top - jQuery(document).scrollTop() | |
| let is_header_stuck = jQuery(".header .header-wrapper").hasClass("stuck") | |
| let is_product_tab_sticky = jQuery(sticky_element).hasClass("sticky-below-header") | |
| if (is_header_stuck && product_tabs_offset_height <= header_height) { | |
| if (!is_product_tab_sticky) { | |
| let height_to_top = header_height + "px" | |
| jQuery(sticky_element).addClass("sticky-below-header") | |
| jQuery(".sticky-below-header")[0].style.setProperty("--height-to-top", height_to_top) | |
| const divs = document.querySelectorAll('.sticky-below-header li a'); | |
| divs.forEach(el => el.addEventListener('click', scrollToTab)); | |
| } | |
| let body_overflow_x = document.querySelector('body').style.overflowX | |
| if (body_overflow_x == 'hidden' || body_overflow_x == '') { | |
| document.querySelector('body').style.overflowX = 'visible'; | |
| } | |
| } else { | |
| jQuery(sticky_element).removeClass("sticky-below-header") | |
| } | |
| }) | |
| function scrollToTab() { | |
| jQuery([document.documentElement, document.body]).animate({ | |
| scrollTop: jQuery(sticky_element_top).offset().top - 60 - adminbar_height | |
| }, 600); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment