javascript - Sticky Header Logo Hover -

I found this website today How does anyone know how to make a sticky header like this? Hide navigation and scroll only logo on logo hover Show navigation. If someone can help me with coding or any resource that helps me make it your answer will be very helpful for me.

This is just a ridiculous implementation, but I think that you might

  $ (window ) .scroll (function () {var $ container = $ (". Container"); var container_offset = $ container.offset (). Top-$ (window) .scrollTop (); console.log (container_offset); if ( Container_offet) {$ container.ad class ('restless');} and {$ container. RemoveClass ('fixed');}});  

  @import url (http://fonts.googleapis.com/css?family=Open+ Sans); Body {font-family: 'open suns', without-serif; Font-size: 16px; Background color: #BDC3C7; Padding: 0; Margin: 0; } .header {background-color: # 3498db; Swim left; Width: 100%; Height: 70px; Infection: Width .3s; } .container.fixed .header {width: 100px; Max-width: 900 pixels; Status: fixed; Top: 20px; } .container.fixed .header ul {display: none; } .container.fixed Main {margin-top: 70px; } H1 {float: left; } Ul {float: left; } Ul li {display: inline-block; }. Container {margin: 0 auto; Width: 100%; Padding: 20px; Background color: # 34495e; Swim left; }. Men {min-height: 1000px; Color: #fff; Swim left; Line-height: 1.4 mm; } P {margin-down: 20px; }  

  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div class = "container" & gt; & Lt; Header class = "header" & gt; & Lt; H1 & gt; Logo & lt; / H1> & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Foo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Foo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Foo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Foo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Foo & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Header & gt; & Lt; Div class = "main" & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; P & gt; To use advertising, Similique fugiat has been searching for researchers, the most important corporation for the total workers, as well as all kinds of life for this type of development. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;