I copied this from another post, not blindly, I can see what it does but I can't think of a way to fix the problem. I am not really proficient in JavaScript but I can read this snippet.
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function() {
offsetAnchor();
});
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(function() {
offsetAnchor();
}, 3);
;(function($) {
$('.swipebox').swipebox();
})(jQuery);
The issue was, that when I was scrolling to DIVs with ID's used for anchor points, I was scrolling slightly too far down as I have a sticky header. I tried using this so when changing DIV it would account for the sticky header, it doesn't exactly work perfectly but the main issue I am having, is that I will have over 12 navigation DIV ids, and every time anyone of them is clicked it no longer goes to the DIV, but instead just scrolls up -100 pixels.
I essentially need a solution that will scroll to just above where I need it without affecting the rest of my menu functionality, it doesn't have to be achieved by JS but that's the only feasible way I can see a solution (I've tried thinking of a CSS only one but margin/padding won't help in this situation of scrolling)
To give one last detail, when clicking on a navigation div it will scroll to that div, and the menu (sticky header) will cover some of the image and the of the item scrolled too. Major problem :)
I can leave a link if you'd like a better description and I am learning JS at the moment, but as this is for a client I'd love to be able to fix it within a timely manner and would greatly appreciate any and all help anyone can offer.
Thank you.
