Sticky header covers content of destination anchor

Hi Ismael

I put the content into a color section, removed the ID “webcams” from the h2 title tag and applied it to the color section. The issue still consists.

I have just realized that on Enfold’s Support Website anchor IDs seem to work properly with the sticky header. See further details in Private Content.

I guess that Enfold’s Support Forum also runs with the Enfold Theme. So why does it work there but not on my website?

Kind regards
Ueli

Hi Ismael

It’s definitely not working correctly! Of course, I always purge the cache or remove the browser history before checking the page.

Based on your screenshot, I assume you were using the Chrome browser and you were logged in the WordPress backend while testing the site. I’ve just found out if you do so, the issue seems gone. But if you are not logged in the backend while testing the site, the sticky header covers the title most of the time. However, if I repeat the test over and over again, it very rarely works. This observation applies to Chrome. With Firefox it doesn’t really matter if you are logged in the backend or not. Most of the times, the title stays covered.

So please test the site again without being logged in the backend.

Kind regards
Ueli

Hi Ismael

I have completely removed the webcams to find out if it works at least with only title and text. Unfortunately it doesn’t. Both on Firefox and on Chrome the title is mostly covered by the header. I have tested on several windows desktop computers and even friends can reproduce the issue. It seems to work on iPad’s Safari.

What else can you do?

Kind regards
Ueli

Hi Ismael

I’m at a loss and a bit desperate.

I don’t understand why it should work well on your side but all of my colleagues (at least 4 people with different computers on different locations) report the same misbehavior that I’m talking about. If you click the “Webcams”-link on the homepage at a very first visit, the corresponding anchor title “Webcams” on the webpage “Aktuelles” stays covered by the sticky header. Please see new screen videos of Firefox and Chrome in Private Content. We always clear the cache and hard refresh the homepage before making the tests. The videos also show that if you go back and forth then the scrolling position is correct. But on an initial load (a very first visit) the offset script is not fired correctly.

Kind regards
Ueli

Hi Mike

Thanks! Your solution seems to work on all major browsers and I might live with that scrolling approach. But if the header isn’t sticky, like on smaller screens (width less than 768px), there must be a smaller offset. The code needs to be completed with a dependency of the screen width. For example, if the screen width is 768px or more then the offset is 80px and if the screen width is less than 768px then the offset is 10px. How can this be achieved?

Kind regards
Ueli

Hi Mike

Your modification works well so far.

But I ran into several new issues because the scrolling script affects now every link/anchor with a # on my website. For example there is a link with a # that opens the lightbox containing a contact form. While the lightbox is opening in the foreground, the page scrolls back to the top in the background instead of staying in place.

I fixed these issues in completing your code with a if(is_page(PAGE ID)) conditional.

function custom_offset_script_with_width() {
if(is_page(972)) {
?>
    <script>
(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
  	var width = $(window).width()
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
      	if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 10 //offset if header isn't sticky
        }, 1000);
        return false;
      } else {
      	$('html,body').animate({
          scrollTop: target.offset().top - 100 //offset if header is sticky
        }, 1000);
        return false;
      }
      } 
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
      	if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 10 //offset if header isn't sticky here too.
        }, 1000);
        return false;
      } else {
      	$('html,body').animate({
          scrollTop: target.offset().top - 100 //offset if header is sticky here too.
        }, 1000);
        return false;
      }
      } 
    }
}(jQuery));
</script>
    <?php
}
}
add_action('wp_footer', 'custom_offset_script_with_width');

The script runs now only on the specific page where it is needed. That works fine for me.

Another approach might be that your initial script affects only a specific anchor – #webcams in my case – instead of affecting every anchor with a #. How can this be achieved?

Kind regards
Ueli

Hi Mike

That approach also works well. How does the code look like if I want to affect a second and third anchor – e. g. #beitraege and #berichte?

Kind regards
Ueli

Hi Mike

OK, I prefer the first approach while assigning the script to the pages where it is needed.
Thanks for your and Ismael’s help.

Kind regards
Ueli