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

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

Answer 1

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>