{"id":6119,"date":"2022-05-31T16:11:16","date_gmt":"2022-05-31T20:11:16","guid":{"rendered":"https:\/\/themespress.ca\/?p=6119"},"modified":"2022-08-23T07:45:35","modified_gmt":"2022-08-23T11:45:35","slug":"configuring-anchors-sticky-or-fixed","status":"publish","type":"post","link":"https:\/\/themespress.ca\/en\/configuring-anchors-sticky-or-fixed\/","title":{"rendered":"Configuring Anchors: Sticky or Fixed"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

With this tutorial, we will show you how to configure anchors at the perfect height with either position sticky or fixed.<\/p>\n

We found various ways to pull this off with CSS but we also found additional coding information on the web.<\/p>\n

The first thing required is that your fixed or sticky header needs to be measured in pixels to get an approximate height of your header.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

Result of anchors with a fixed header.<\/h2>\n\t
\n\t\t
\n\t\t\t

We can clearly see in our example that the title is in the anchor. Logically, seeing as my ID is above it, we should land above the title.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Param\u00e9trer<\/div>\n\t\t<\/figure>\n\t<\/div>\n

CSS for your sticky or fixed header<\/h2>\n\t
\n\t\t
\n\t\t\t

You need to make sure to add the following CSS value: top:0. It’s this value that will position perfectly your anchor at the right spot.<\/p>\n

The problem with headers configured with a sticky or fixed position is that the anchor doesn’t always land where you want it to be given there’s a gap caused by the pixel height of the header.<\/p>\n

Here our HTML body needs to have the sticky CSS while the header needs position and top.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

body.stiky header {\n  position: sticky;\n  background: #fff;\n  z-index: 3;\n  width: 100%;\n  left: 0;\n  top: 0;\n}<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
We then found this helpful code which will fix the gap issue.<\/p>\n
In our example, the height of our header is 215px.<\/strong>
\nOFFSET_HEIGHT_PX: 215,<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
Javascript to add in the footer<\/h2>
<script>\n(function(document, history, location) {\n  var HISTORY_SUPPORT = !!(history && history.pushState);\n\n  var anchorScrolls = {\n    ANCHOR_REGEX: \/^#[^ ]+$\/,\n    OFFSET_HEIGHT_PX: 215,\n\n    \/**\n     * Establish events, and fix initial scroll position if a hash is provided.\n     *\/\n    init: function() {\n      this.scrollToCurrent();\n      $(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));\n      $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));\n    },\n\n    \/**\n     * Return the offset amount to deduct from the normal scroll position.\n     * Modify as appropriate to allow for dynamic calculations\n     *\/\n    getFixedOffset: function() {\n      return this.OFFSET_HEIGHT_PX;\n    },\n\n    \/**\n     * If the provided href is an anchor which resolves to an element on the\n     * page, scroll to it.\n     * @param  {String} href\n     * @return {Boolean} - Was the href an anchor.\n     *\/\n    scrollIfAnchor: function(href, pushToHistory) {\n      var match, anchorOffset;\n\n      if(!this.ANCHOR_REGEX.test(href)) {\n        return false;\n      }\n\n      match = document.getElementById(href.slice(1));\n\n      if(match) {\n        anchorOffset = $(match).offset().top - this.getFixedOffset();\n        $('html, body').animate({ scrollTop: anchorOffset});\n\n        \/\/ Add the state to history as-per normal anchor links\n        if(HISTORY_SUPPORT && pushToHistory) {\n          history.pushState({}, document.title, location.pathname + href);\n        }\n      }\n\n      return !!match;\n    },\n    \n    \/**\n     * Attempt to scroll to the current location's hash.\n     *\/\n    scrollToCurrent: function(e) { \n      if(this.scrollIfAnchor(window.location.hash) && e) {\n      \te.preventDefault();\n      }\n    },\n\n    \/**\n     * If the click event's target was an anchor, fix the scroll position.\n     *\/\n    delegateAnchors: function(e) {\n      var elem = e.target;\n\n      if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {\n        e.preventDefault();\n      }\n    }\n  };\n\n\t$(document).ready($.proxy(anchorScrolls, 'init'));\n})(window.document, window.history, window.location);\n<\/script><\/pre><\/div>
Final result with the anchor<\/h2>\n\t
\n\t\t
\n\t\t\t
We see that the anchor is positioned exactly where the ID is, i.e. above the title.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Avec<\/div>\n\t\t<\/figure>\n\t<\/div>\n
Slide effect on the anchor<\/h2>\n\t
\n\t\t
\n\t\t\t
You can also add a slide effect that drops the ID towards the anchor.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
html {scroll-behavior: smooth;}<\/pre><\/div><\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"With this tutorial, we will show you how to configure anchors at the perfect height with either position sticky or fixed. We found various ways to pull this off with
Read More<\/a><\/div>","protected":false},"author":81,"featured_media":6010,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[283],"tags":[],"class_list":["post-6119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/comments?post=6119"}],"version-history":[{"count":0,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media\/6010"}],"wp:attachment":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media?parent=6119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/categories?post=6119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/tags?post=6119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}