When scroll wordpress header change

Question

How make this studiompls . com/case-studies/crown-maple/?

My idea is: when scroll my site, this header change from this.

My website link: altnewspaper.com

Many thanks!

Answer 1

The way I do is to catch the scrolling, and if I pass over the heading, I change class to header to get the fixed style, and same thing reverse. Here is the example...

  //get height of the document -cross browser compatibility
  function getDocHeight() {
    var D = document;
    return Math.max(
      Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
      Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
      Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
  }
  $(window).scroll( function() {
    var top = $(this).scrollTop();
    //72 is height of your regular menu, not fixed
    if (top > 72)
    {
        $("body").addClass("fixedMenu");
        $(".head").removeClass("static").addClass("fixed");
        $("#helperDiv").css('height',128); //I've made this to resolve glitch that can exist when scrolling, if content is not too big
        $("#logo").hide(); // you can change images instead making two different divs
        $("#logoSmall").show();
    }
    else
    {
        $("body").removeClass("fixedMenu");
        $(".pdcaHead").removeClass("fixed").addClass("static");
        $("#helperDiv").css('height',0);            
        $("#logo").show();
        $("#logoSmall").hide();
    }

  });

You can of course add animation if you want on top of this...

Answer 2

use proper classes as per your html

<style>
.header{top: 0;left: 0;right: 0;}    
</style>
<script>
$(document).ready( function() {
var topOfOthDiv = $(".header").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { 
$(".header").css({"position":"fixed","float":"left"});
$(".search").css("display","none");
}else{   
$(".header").css({"position":"static","float":"none"});
$(".search").css("display","block");
} 
}); 
});
</script>