HTML position:fixed variable-height page header and in-page anchors

Question

I have successfully designed page anchors which will on first click compensate for the fixed header height, code below:

<p id="anchorid" style="padding-top: 287px; margin-top: -287px; width: 20px;">
   FILLER TEXT
</p>

The issue I have is that my header shrinks when you scroll, so once you click onto a page via an anchor, the next time you click an anchor -for- that page while -on- that page, the padding over-compensates (as it is set to the initial header height) and the section is brought to the middle of the page rather than the top. What I hope to do is have the anchor padding set dynamically to the height of the header, so that it always brings the section to the top, but I am woefully lost as to how to do this.

Is there a way to use the anchor (the id="filler") to have the browser scroll to a certain point, depending on the height of the header, using CSS?

Similar problem solved here, but their header doesn't change size: HTML position:fixed page header and in-page anchors

Impossible to answer you. First of all, you are making a weird trick. Second, you are not explained how do you need and you don't provide a working example. In stackoverflow, this kind of questions are **offtopic**. Read the help, improve the question, and maybe someone can help you. — Marcos Pérez Gude, Mar 17 '16 at 16:29
Questions seeking debugging help ("**why isn't this code working?**") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Questions without a **clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Marcos Pérez Gude, Mar 17 '16 at 16:29
@riversnj : See my edited answer and let me know if that's what you're looking for. Good luck ! — JazZ, Mar 17 '16 at 17:29

JazZ · Answer 1 · 2016-03-17T17:36:37.407

EDITED ANSWER :

Here is the code I'm using for a fixed header who takes care of the offset when scrolling to anchor with a smouth scroll using jQuery.

Here is an illustration : https://jsfiddle.net/mmb5k7xb/1/

To see how the script react with a different height, just change the value of the menu height in the html part.

Hope it helps.

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function($) {

var menu_height = $('.menu').height(); // calulate the height of the menu

(function(document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: menu_height, // Set the offset with the dynamic value

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() {
      this.scrollIfAnchor(location.hash);
      $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
    },

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() {
      return this.OFFSET_HEIGHT_PX;
    },

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {String} href
     * @return {Boolean} - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) {
      var match, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) {
        return false;
      }

      match = document.getElementById(href.slice(1));

      if(match) {
        anchorOffset = $(match).offset().top - this.getFixedOffset();
        $('html, body').animate({ scrollTop: anchorOffset});

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) {
          history.pushState({}, document.title, location.pathname + href);
        }
      }

      return !!match;
    },

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) {
      var elem = e.target;

      if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
        e.preventDefault();
      }
    }
  };

    $(document).ready($.proxy(anchorScrolls, 'init'));
})(window.document, window.history, window.location);
});
</script>

HTML position:fixed variable-height page header and in-page anchors

1 Answers1