Smoth Scroll + Animated Sticked Header = Problem

Hi everybody.

I have a smoth scroll effect to go up and down along a page with anchors by this script:

(function($){
  
    var jump=function(e)
    {
       if (e){
           e.preventDefault();
           var target = $(this).attr("href");
       }else{
           var target = location.hash;
       }

       $('html,body').animate(
       {
           scrollTop: $(target).offset().top
       },1000,function()
       {
           location.hash = target;
       });

    }

    $('html, body').hide()

    $(document).ready(function()
    {
        $('a[href^=#]').bind("click", jump);

        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show()
                jump()
            }, 0);
        }else{
          $('html, body').show()
        }
    });
  
})(jQuery)

and https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js

And I have an animated sticked header that shows when scroll up.

The problem is that when you click on any of the links to scroll to an anchor up on the page, the header shows down covering its title and part of its content, which is quite an inconvenience, and much more on small screens in mobile devices.

Maybe some of you have had the same problem with this combination of effects, or know some way to solve the issue?

I have been working on some way to hide the header when the anchor hash is added to the url, but I am unable to do it without spoiling the header effect. Surely there is a way to do it, but I am not a JS expert.

Thanks.

well without knowing what your header HTML looks like, it’s going to be a bit difficult, but you’ve already identified that you can show() elements. You can hide() them too.

The header is a div including the logo, navbar and a phone number on a blue background.

Of course I can hide them, but how in this case?

You’ve got the code for when the anchor hash is added, and you know how to hide elements.
What… part are you having trouble with?

How to hide the header when there is a hash in the url.

My website does not use any other hash-effect, so there is no problem with other functions.

First of all, I cannot do it without reload the page, which is not possible in this case.

var jump=function(e)
{
   if (e){
       e.preventDefault();
       var target = $(this).attr("href");
   }else{
       var target = location.hash;
   }

   $('html,body').animate(
   {
       scrollTop: $(target).offset().top
   },1000,function()
   {
       location.hash = target; #This is where you set the hash.
        #So here is where your hide code goes.
   });

}

I added this:

document.getElementById("header").style.display = "none";

Being “header” the div id, and nothing happens. The header still shows down.

The style is not added to the element.

Is this page online somewhere we can see it? This is one of those instances where seeing is going to be more helpful than trying to guess at what your page looks like.

No it is not only. No domain yet.

Anyway, for more information, the header script (in the same file) is:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header").style.top = "0";
	document.getElementById("header").style.backgroundColor = "rgba(1, 56, 106, 0.9)";
  } else {
    document.getElementById("header").style.top = "-100%";
  }
  prevScrollpos = currentScrollPos;  
  
  if (document.body.scrollTop > 180 || document.documentElement.scrollTop > 180) {
    document.getElementById("header").style.backgroundColor = "rgba(1, 56, 106, 0.9)";
	document.getElementById("header").style.height = "104px";
	document.getElementById("header").style.padding = "0";
  } else {
    document.getElementById("header").setAttribute("style", "background-color: rgba(1, 56, 106, 0); transition: 1s");
  }  
}

It is 180 px height, and after scrolling down after that height, it is removed as you can see.

The jQuery I added before right under this script in the js file.

There is nothing more about it.

I tried what you said, but if I set it like this:

         location.hash = target;
   	   document.getElementById("header").style.display = "none";
      });

then the header and all its content is hidden until you scroll up to the very top of the page, and the effect disappears.

Maybe there could be a way to detect when the user scrolls up manually to remove the line with the display: none style.

I came across the solution described in the last post on this page:

https://stackoverflow.com/questions/20737937/detect-if-a-scroll-event-is-triggered-manually-in-jquery

But I simply do not know how to apply it to my script. If it is to apply it to my case at all.

This may be a bit simplistic but if the header is a fixed height then can’t you just assume it will be there and scroll past it?

e.g.
scrollTop: $(target).offset().top - 105 // or whatever it is

(Or perhaps find its exact height in JS in case it changes.)

Something like this very basic old demo I relocated to codepen.

https://codepen.io/paulobrien/full/jONgeZp

Hi Paul.

The header is fixed but visible at the very top of the page. It disappears when you scroll down and shows when scrolling up.

This is the scroll:

https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

The code is above in the thread.

The problem is that I have installed also the smoth scroll effect to go up and down the page, and when I click on an up-button or any other one that triggers the smoth scroll up effect, the header shows down.

As the smoth effect works adding a hash to the url, I have considered adding some script to hide the header JUST for that effect.

I had a go at reproducing your code and setting up a demo although I removed some js in favour of using css and swapping classes etc.

I think I managed to reproduce what you wanted but the JS ended up very messy (especially because I am useless at it) but it may help the experts here (@m_hutley) to come up with a better solution or at least tidy up my messy JS code :slight_smile:

https://codepen.io/paulobrien/full/wvvwZqw

At the very least its a starting point for something to work with. :slight_smile: