Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save manbearwolf/0506d0a0ab5b4bbfb9776acf660d1a96 to your computer and use it in GitHub Desktop.

Select an option

Save manbearwolf/0506d0a0ab5b4bbfb9776acf660d1a96 to your computer and use it in GitHub Desktop.
/**
* Issue: When users click on an anchor link that scrolls them up/down the page,
* the top of the section/heading they're going to is covered by a fixed header.
*
* This can be fixed on a case-by-case basis in CSS, but there are many gotchas!
* In particular, if you add a pseudoelement offset above the anchor target, it might
* make the text above the target unselectable (b/c it covers the text up)
*
* This JS solution simply scrolls the user up right after they click on the anchor,
* just enough to compensate for the fixed header. It also compensates for the initial
* page load of a url with an anchor already in it (listen for first scroll).
*/
!function (window)
{
'use strict';
// Update this function so it returns the height of your fixed headers
function fixedHeaderOffset()
{
var width = window.innerWidth;
if ( width < 525 ) {
return 120;
}
else if ( width < 1024 ) {
return 88;
}
else {
return 40;
}
}
// Run on first scroll (in case the user loaded a page with a hash in the url)
window.addEventListener('scroll', onScroll);
function onScroll()
{
window.removeEventListener('scroll', onScroll);
scrollUpToCompensateForFixedHeader();
}
// Run on hash change (user clicked on anchor link)
if ( 'onhashchange' in window ) {
window.addEventListener('hashchange', scrollUpToCompensateForFixedHeader);
}
function scrollUpToCompensateForFixedHeader()
{
var hash,
target,
offset;
// Get hash, e.g. #mathematics
hash = window.location.hash;
if ( hash.length < 2 ) { return; }
// Get :target, e.g. <h2 id="mathematics">...</h2>
target = document.getElementById( hash.slice(1) );
if ( target === null ) { return; }
// Get distance of :target from top of viewport. If it's near zero, we assume
// that the user was just scrolled to the :target.
if ( target.getBoundingClientRect().top < 2 ) {
window.scrollBy(0, -fixedHeaderOffset());
}
}
}(window);
@manbearwolf

manbearwolf commented Aug 18, 2017

Copy link
Copy Markdown
Author

Note: Change bottom line
63: window.scrollBy(0, -fixedHeaderOffset());
to
63: window.scrollby(0, -55); or so for fixed menu top.

@manbearwolf

manbearwolf commented Aug 18, 2017

Copy link
Copy Markdown
Author

covers fade and effects in liquid (captured??) % tags % (captured??), css, effects.

@manbearwolf

manbearwolf commented Aug 18, 2017

Copy link
Copy Markdown
Author

Not Sure, yet

(Messy Anchor Talk)
Change lines in it maybe to cover the double click
(try comments on the site http://micahjon.com/2016/solving-the-anchor-targets-behind-fixed-headers-bug-with-minimal-javascript/)...????

I doubt this theme has a cheap header, but is complicated in css on the basis of (captured) (tags). Things work in java (other scripts) besides this code minus these capture tags (just anchors). a little worse than 'a' things (li a). To begin with.

As if it had to go far back there about anchor (which is any of that). [Capture tags way back there to beat in javascripts], in jekyll
(Messy Anchor Talk)

added to custom.js

For smooth scroll, menu top, and anchor plus tags.

Other options are non-fixed-top menu from the theme options... site says???

@manbearwolf

manbearwolf commented Aug 18, 2017

Copy link
Copy Markdown
Author

ya, the static menu looks, better anyway, maybe...

search for fixed replace with static in css...

@manbearwolf

manbearwolf commented Aug 19, 2017

Copy link
Copy Markdown
Author

This code works great, besides some issue with double clicking same anchor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment