How is this made?

[remove]

The top navigation shrinks at the moment you scroll down. The logo gets smaller. Here is an example.

http://www.grafik.com

Does anyone have an idea how this is made.

[Philipp]

A quick Google search brought up zillions of tutorials and jquery plugins, for example this one here.

Technically, if the user starts to scroll, you decrease the height of the header with every pixel scrolled.

[kixe]

uaah wordpress

[ryan]

I used to work there for several years- my first job out of college. I actually designed the website about 2-3 versions before the current one. Though couldn't tell you anything about the current site. I've always missed working there, one of the best places I've worked. Always great to hear about Grafik.

[ryan]

And too bad about WordPress if that's what they are using. I don't think they even know about PW. I will have to have a talk with them sometime.

[PhotoWebMax]

In this case I am not sure there is a point to this effect? But I am guilty of using navbar effects myself... Hmmm

[kixe]

And too bad about WordPress if that's what they are using. I don't think they even know about PW. I will have to have a talk with them sometime.

A cute devil in pub turns out to drop a clanger. Never get involved with the devil. I need more Smileys here - in the pub, like glass of beer or so. Back to serious discussion ...

[benbyf]

Pretty easy in jquery and I've done it on this site: http://ciaraphelan.com/

Pretty much just add an event listener to scroll and when the scrollY is over a certain amount you trigger something (and trigger it back for less than that number).

I wrote this a while ago so you might be able to do something more succinct:

$scroll = 0;

$(window).on('scroll', function(e) {
  
  if(window.innerWidth >= 768){
  
    if(window.pageYOffset >= 300){ // desktop menu collapse
      
      // do something
      
    }else if(window.pageYOffset <= 299){
    
      // do something back
      
    }
  }
});