Sticky Header and Anchor Links

  • July 11, 2018
  • Code
  • 0 Comments
  • melissaSpiegel

Anchor links with a sticky header tend to be troublesome. When a user clicks on the link the browser will scroll past the link. You must take in account the height of the sticky  header.

Why CSS is a Mistake to Fix Sticky Header Scrolling

Lots of people suggest css to fix the issue, but using css always causes formatting issues on some browser. You will get an email from the client, that regarding a strange space on *whatever browser.

 

jQuery Sticky Header Fix

I found jQuery or javascript are the best way to go. Add a class to the div that surrounds the menu or button with the anchor link. See class “myAnchor” below

For Example 

The HTML

<div class="myAnchor"">
<a href="#memberatl">Find a Member</a>
<a href="#job">See Posted Job Openings</a>  
<a href="#resumes">See Available Candidate Resumes</a>  
<a href="#postJob">Post a Job or Resume</a>
</div>

 

<div id="memberatl">Members here</div>

 

The jQuery

<script type="text/javascript"> 
jQuery(document).ready(function($){
    $('.myAnchor a').click(function(e){

        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                jQuery('html, body').animate({
                 scrollTop: Math.ceil(target.offset().top-62) 
                }, 1000);
            return false;
            }
        }
    });
});

 </script>

 

That is it, if you are using visual composer, they have a raw js field that you can place the code above in.

melissaSpiegel