Last active
November 25, 2022 12:44
-
-
Save dpw1/443cf7cd02dc34e081500c71217c7566 to your computer and use it in GitHub Desktop.
Dawn sticky header
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
| {% comment %} | |
| ____ _ _ _ _ _ | |
| / ___| | |_ (_) ___ | | __ _ _ | |__ ___ __ _ __| | ___ _ __ | |
| \___ \ | __| | | / __| | |/ / | | | | | '_ \ / _ \ / _` | / _` | / _ \ | '__| | |
| ___) | | |_ | | | (__ | < | |_| | | | | | | __/ | (_| | | (_| | | __/ | | | |
| |____/ \__| |_| \___| |_|\_\ \__, | |_| |_| \___| \__,_| \__,_| \___| |_| | |
| |___/ | |
| ## Custom Dawn Sticky header by ezfycode.com | |
| {% endcomment %} | |
| <style> | |
| {% assign sticky_header = section.settings.sticky_header %} | |
| {% assign sticky_announcement_bar = section.settings.sticky_announcement_bar %} | |
| {% assign background_color = section.settings.background_color %} | |
| {% assign background_color_sticky = section.settings.background_color_sticky %} | |
| {% assign text_color = section.settings.text_color %} | |
| {% assign text_color_sticky = section.settings.text_color_sticky %} | |
| {% assign background_color_outside_homepage = section.settings.background_color_outside_homepage %} | |
| {% assign background_color_sticky_outside_homepage = section.settings.background_color_sticky_outside_homepage %} | |
| {% assign text_color_outside_homepage = section.settings.text_color_outside_homepage %} | |
| {% assign text_color_sticky_outside_homepage = section.settings.text_color_sticky_outside_homepage %} | |
| {% assign margin_top = section.settings.margin_top %} | |
| {% assign margin_top_mobile = section.settings.margin_top_mobile %} | |
| {% assign margin_top_outside_homepage = section.settings.margin_top_outside_homepage %} | |
| {% assign margin_top_outside_homepage_mobile = section.settings.margin_top_outside_homepage_mobile %} | |
| /* ## Header | |
| ============================ */ | |
| #shopify-section-header{ | |
| {% if sticky_header %} | |
| position: fixed; | |
| {% else %} | |
| position: absolute; | |
| {% endif %} | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| z-index: 10; | |
| } | |
| #shopify-section-header > *{ | |
| transition: all .25s; | |
| } | |
| #shopify-section-header:not([class*='hidden']), | |
| #shopify-section-header:not([class*='hidden']) > *, | |
| #shopify-section-header:not([class*='hidden']):not([class*='sticky']) .header-wrapper{ | |
| background:{% if background_color != '' %}{{ background_color }}{% else %}transparent{% endif %}; | |
| {% if template.name != 'index' %} | |
| background:{% if background_color_outside_homepage != '' %}{{ background_color_outside_homepage }}{% else %}transparent{% endif %}; | |
| {% endif %} | |
| } | |
| #shopify-section-header:not([class*='hidden']):not([class*='sticky']) .header-wrapper{ | |
| border-bottom-color: {% if background_color != '' %}{{ background_color }}{% else %}transparent{% endif %}; | |
| {% if template.name != 'index' %} | |
| background:{% if background_color_outside_homepage != '' %}{{ background_color_outside_homepage }}{% else %}transparent{% endif %}; | |
| {% endif %} | |
| } | |
| #shopify-section-header:not([class*='hidden']) * { | |
| color: {{ text_color }} !important; | |
| {% if template.name != 'index' %} | |
| color: {{ text_color_outside_homepage }} !important; | |
| {% endif %} | |
| } | |
| #shopify-section-header.shopify-section-header-sticky, | |
| #shopify-section-header.shopify-section-header-sticky .header-wrapper{ | |
| background-color: {{ background_color_sticky }} !important; | |
| {% if template.name != 'index' %} | |
| background-color: {{ background_color_sticky_outside_homepage }} !important; | |
| {% endif %} | |
| } | |
| #shopify-section-header.shopify-section-header-sticky *:not(.announcement-bar__message){ | |
| color: {{ text_color_sticky }} !important; | |
| {% if template.name != 'index' %} | |
| color: {{ text_color_sticky_outside_homepage }} !important; | |
| {% endif %} | |
| } | |
| .shopify-section-header-hidden{ | |
| transform: unset !important; | |
| } | |
| #shopify-section-header, | |
| #shopify-section-header:not([class*='hidden']) > *, | |
| .header-wrapper{ | |
| transition: background .25s !important; | |
| } | |
| {% if template.name == "index" %} | |
| #MainContent{ | |
| margin-top: {{ margin_top }}px !important; | |
| } | |
| @media (max-width: 749px){ | |
| #MainContent{ | |
| margin-top: {{ margin_top_mobile }}px !important; | |
| } | |
| } | |
| {% elsif template.name != 'index' %} | |
| #MainContent{ | |
| margin-top: {{ margin_top_outside_homepage }}px !important; | |
| } | |
| @media (max-width: 749px){ | |
| #MainContent{ | |
| margin-top: {{ margin_top_outside_homepage_mobile }}px !important; | |
| } | |
| } | |
| {% endif %} | |
| /* ## Announcement Bar | |
| ============================ */ | |
| #shopify-section-announcement-bar{ | |
| z-index: 12 !important; | |
| } | |
| </style> | |
| <div id="ezfyStickyHeaderSettings" | |
| data-sticky-header="{{ sticky_header }}" | |
| data-sticky-announcement-bar="{{ sticky_announcement_bar }}"></div> | |
| <script> | |
| window.ezfyDawnStickyHeader = window.ezfyDawnStickyHeader || {}; | |
| ezfyDawnStickyHeader = (function () { | |
| const STICKY_ANNOUNCEMENT = getDataAttribute(`sticky-announcement-bar`); | |
| const STICKY_HEADER = getDataAttribute(`sticky-header`); | |
| function _loadScript(src) { | |
| return new Promise(function (resolve, reject) { | |
| var s; | |
| s = document.createElement("script"); | |
| s.src = src; | |
| s.onload = resolve; | |
| s.onerror = reject; | |
| document.head.appendChild(s); | |
| }); | |
| } | |
| function getDataAttribute(dataAttribute) { | |
| const attribute = `data-${dataAttribute}` | |
| const element = document.querySelector(`#ezfyStickyHeaderSettings[${attribute}]`); | |
| if (!element) { | |
| return null; | |
| } | |
| const data = element.getAttribute(attribute); | |
| if (data === 'true') { | |
| return true; | |
| } else if (data === 'false') { | |
| return false | |
| } else { | |
| return data; | |
| } | |
| } | |
| function _extractTextBetween(text, start, end) { | |
| if (!start || !end) { | |
| throw new Error(`Please add a "start" and "end" parameter`); | |
| } | |
| return text.split(start)[1].split(end)[0]; | |
| } | |
| function _loadStyle(src) { | |
| return new Promise(function (resolve, reject) { | |
| let link = document.createElement("link"); | |
| link.href = src; | |
| link.rel = "stylesheet"; | |
| link.onload = () => resolve(link); | |
| link.onerror = () => reject(new Error(`Style load error for ${src}`)); | |
| document.head.append(link); | |
| }); | |
| } | |
| function _isProductPage() { | |
| return /product/.test(window.location.href); | |
| } | |
| function _isCartPage() { | |
| return /cart/.test(window.location.href); | |
| } | |
| function _waitForElement(selector, delay = 50, tries = 100) { | |
| const element = document.querySelector(selector); | |
| if (!window[`__${selector}`]) { | |
| window[`__${selector}`] = 0; | |
| window[`__${selector}__delay`] = delay; | |
| window[`__${selector}__tries`] = tries; | |
| } | |
| function _search() { | |
| return new Promise((resolve) => { | |
| window[`__${selector}`]++; | |
| setTimeout(resolve, window[`__${selector}__delay`]); | |
| }); | |
| } | |
| if (element === null) { | |
| if (window[`__${selector}`] >= window[`__${selector}__tries`]) { | |
| window[`__${selector}`] = 0; | |
| return Promise.resolve(null); | |
| } | |
| return _search().then(() => _waitForElement(selector)); | |
| } else { | |
| return Promise.resolve(element); | |
| } | |
| } | |
| const moveDOMElement = (parent,child) => parent.insertAdjacentElement('afterbegin', child) | |
| function initCode(){ | |
| var e=["background: linear-gradient(-47deg,#8731e8,#4528dc)","border: 1px solid #3E0E02","color: white","display: block","text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)","box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset","line-height: 40px","text-align: center","font-weight: bold","padding: 0px 5px"].join(";");function r(e){return(e+"").replace(/&#\d+;/gm,function(e){return String.fromCharCode(e.match(/\d+/gm)[0])})}var n=r(`Sticky Dawn Header by https://ezfycode.com`);console.log(`%c ${n}`,e); | |
| } | |
| function _addStyle(styleString) { | |
| const id = `${styleString}`.replace(/\s+/g, ' ').trim(); | |
| const style = document.createElement("style"); | |
| style.textContent = styleString; | |
| document.head.append(style); | |
| } | |
| async function addPaddingForNonStickyAnnouncementBar(){ | |
| if (STICKY_ANNOUNCEMENT){ | |
| return; | |
| } | |
| const $announcement = await _waitForElement(`#shopify-section-announcement-bar`); | |
| if (!$announcement){ | |
| return; | |
| } | |
| const _height = $announcement.offsetHeight; | |
| if (_height && _height.length <= 0 ){ | |
| return; | |
| } | |
| const height = parseInt(_height); | |
| function adjust(height, transition = true){ | |
| const threshold = height / 2; | |
| if (window.scrollY < threshold){ | |
| _addStyle(`#shopify-section-header:not([class*='hidden']){padding-top: ${height}px;${transition ? `transition: all .25s;` : ''}}`); | |
| } else if (window.scrollY >= threshold){ | |
| _addStyle(`#shopify-section-header:not([class*='hidden']){padding-top: ${0}px;${transition ? `transition: all .25s;` : ''}}`); | |
| } | |
| } | |
| adjust(height, false); | |
| window.addEventListener("scroll", () => { | |
| adjust(height) | |
| }); | |
| } | |
| async function moveAnnouncementBar(){ | |
| if (!STICKY_ANNOUNCEMENT){ | |
| return; | |
| } | |
| const $header = await _waitForElement(`sticky-header`); | |
| const $bar = await _waitForElement(`#shopify-section-announcement-bar`); | |
| if (!$header || !$bar){ | |
| return; | |
| } | |
| moveDOMElement($header, $bar); | |
| } | |
| return { | |
| init: function () { | |
| initCode(); | |
| addPaddingForNonStickyAnnouncementBar(); | |
| document.addEventListener("DOMContentLoaded", function () { | |
| moveAnnouncementBar(); | |
| }); | |
| window.addEventListener("resize", function () {}); | |
| window.addEventListener("load", function () {}); | |
| window.addEventListener("scroll", function () { | |
| }); | |
| }, | |
| }; | |
| })(); | |
| ezfyDawnStickyHeader.init(); | |
| </script> | |
| {% schema %} | |
| { | |
| "name": "Header", | |
| "class": "section-header", | |
| "settings": [ | |
| { | |
| "type": "header", | |
| "content": "Dawn Sticky Header by ezfycode.com" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "sticky_header", | |
| "default": true, | |
| "label": "Enable sticky header", | |
| "info": "Header shows on the screen as customers scroll up." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "sticky_announcement_bar", | |
| "label": "Enable sticky announcement bar", | |
| "info": "Make sure that \"Enable sticky header\" is enabled.", | |
| "default": true | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Homepage colors" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "background_color", | |
| "label": "Background color" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "background_color_sticky", | |
| "label": "Background color (when sticky)", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_color", | |
| "label": "Text color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_color_sticky", | |
| "label": "Text color (when sticky)", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Other pages colors" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "background_color_outside_homepage", | |
| "label": "Background color (All pages except home page)", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "background_color_sticky_outside_homepage", | |
| "label": "Background color when sticky (All pages except home page)", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_color_outside_homepage", | |
| "label": "Text color (All pages except home page)", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_color_sticky_outside_homepage", | |
| "label": "Text color when sticky (All pages except home page)", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Spacing" | |
| }, | |
| { | |
| "type": "number", | |
| "id": "margin_top", | |
| "label": "Margin top (homepage)", | |
| "info": "Please enter only numbers.", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "number", | |
| "id": "margin_top_mobile", | |
| "label": "Margin top mobile (homepage) ", | |
| "info": "Please enter only numbers.", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "number", | |
| "id": "margin_top_outside_homepage", | |
| "label": "Margin top (for all pages except home page)", | |
| "info": "Please enter only numbers.", | |
| "default": 80 | |
| }, | |
| { | |
| "type": "number", | |
| "id": "margin_top_outside_homepage_mobile", | |
| "label": "Margin top mobile (for all pages except home page) ", | |
| "info": "Please enter only numbers.", | |
| "default": 160 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Original options" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "enable_sticky_header", | |
| "default": true, | |
| "label": "Enable sticky header" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "color_scheme", | |
| "options": [ | |
| { | |
| "value": "accent-1", | |
| "label": "Accent 1" | |
| }, | |
| { | |
| "value": "accent-2", | |
| "label": "Accent 2" | |
| }, | |
| { | |
| "value": "background-1", | |
| "label": "Background 1" | |
| }, | |
| { | |
| "value": "background-2", | |
| "label": "Background 2" | |
| }, | |
| { | |
| "value": "inverse", | |
| "label": "Inverse" | |
| } | |
| ], | |
| "default": "background-1", | |
| "label": "Background 1" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "logo", | |
| "label": "Logo image" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "logo_width", | |
| "min": 50, | |
| "max": 250, | |
| "step": 10, | |
| "default": 100, | |
| "unit": "px", | |
| "label": "Logo width" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "logo_position", | |
| "options": [ | |
| { | |
| "value": "middle-left", | |
| "label": "Middle left" | |
| }, | |
| { | |
| "value": "top-left", | |
| "label": "Top left" | |
| }, | |
| { | |
| "value": "top-center", | |
| "label": "Top center" | |
| } | |
| ], | |
| "default": "middle-left", | |
| "label": "Middle left", | |
| "info": "Position is automatically optimized for mobile." | |
| }, | |
| { | |
| "type": "link_list", | |
| "id": "menu", | |
| "default": "main-menu", | |
| "label": "Menu" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "show_line_separator", | |
| "default": true, | |
| "label": "Show separator line" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "SPACING" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "margin_bottom", | |
| "min": 0, | |
| "max": 100, | |
| "step": 4, | |
| "unit": "px", | |
| "label": "Bottom margin", | |
| "default": 0 | |
| } | |
| ] | |
| } | |
| {% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment