Page header bar toggle on scroll
How do I make an page header bar toggle on scroll?
Hide the page header on scroll down and show it on scroll up. What is a page header bar toggle on scroll? How do you make a page header bar toggle on scroll? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Page header bar toggle on scroll Previews
Page header bar toggle on scroll - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page header bar toggle on scroll</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0
}
.wrap { background: #f8f8f8;
}
body { font-family: "Open Sans", "Arial", sans-serif; font-size: 16px; line-height: 150%;
}
p { margin: 40px 0;
}
h1 { font-size: 20px; text-align: center;
}
h2 { font-size: 18px;
}
section { min-height: 1000px; padding: 60px 10px;
}
header,
footer { position: fixed; box-sizing: border-box; width: 100%; padding: 10px; background: #eee; height: 50px; transition: all 0.3s ease-in-out; box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px;
}
header { top: 0;
}
footer { bottom: 0;
}
.hideHeader header { top: -50px; opacity: 0;
}
.hideFooter footer { bottom: -50px; opacity: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <header> <h1>Hello Title</h1> </header> <section> <div id="lipsum"> <h2> Scroll Down to hide the header and footer. Scroll up or move the mouse near the area where they used to be to show them again. </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis condimentum augue non sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in vulputate sem. In pellentesque, risus in semper facilisis, dui ante sagittis ante, non ullamcorper erat enim sit amet dui. Donec euismod tempor nunc, id elementum metus sollicitudin quis. Aenean volutpat nunc velit, in pharetra elit tempus non. Fusce risus felis, aliquam quis ligula eget, suscipit auctor erat. Vestibulum tincidunt metus a pellentesque varius. Morbi venenatis leo ut ligula tristique, hendrerit consectetur odio faucibus. Duis ornare nisi non velit scelerisque tincidunt. Cras id lobortis massa, eu lacinia justo. Quisque bibendum neque elit, non facilisis tellus feugiat at. Duis sodales vulputate odio placerat tempor. </p> <p> Maecenas tempor metus a lacinia consectetur. Praesent nec ipsum interdum, luctus magna sed, convallis sem. Nam rhoncus sapien nec justo gravida, nec facilisis dolor fermentum. Integer eget mattis mauris. Aliquam non erat nisl. Cras fermentum lorem eu felis vestibulum accumsan. Duis tincidunt turpis quis dui tincidunt semper. Mauris nec nisl magna. Ut a lobortis nisi. Morbi fermentum ultricies diam ut varius. Nunc eget magna erat. Sed sed eros neque. Etiam placerat nisl dui, non tristique urna bibendum et. In viverra, purus in semper lobortis, ipsum enim ullamcorper nibh, eget congue tellus turpis sit amet mi. Sed condimentum magna nisl, in eleifend diam tristique sed. </p> <p> Suspendisse ultrices turpis ipsum, ac aliquet ipsum malesuada vitae. Cras imperdiet orci eget ante viverra gravida. Aliquam volutpat tristique lacus vel convallis. Duis vel nibh accumsan, interdum mi eu, vestibulum ante. Mauris ante felis, euismod vitae turpis vitae, imperdiet egestas justo. Nam mi risus, ultricies eu ornare sit amet, elementum ut lacus. Vivamus facilisis odio eget risus sodales venenatis. Donec tristique nibh sem, hendrerit bibendum orci blandit quis. Integer risus leo, ornare in dui sit amet, iaculis tristique velit. Aliquam erat volutpat. Aenean ultrices sapien at arcu porttitor, vel aliquet massa pretium. Sed varius odio vel nisl dapibus, sed dictum augue posuere. Nunc ac dapibus nibh. </p> <p> Nunc eu sapien vel nibh imperdiet facilisis ut id nunc. Curabitur adipiscing eleifend lorem. Fusce in turpis eu neque convallis porttitor nec eget nisl. Nulla facilisis aliquet tortor eu ultricies. Fusce quis nibh sed lacus tristique pretium. Praesent mollis nulla nibh, id pretium tellus tincidunt eget. Sed pulvinar ullamcorper odio non sagittis. Proin hendrerit urna sed augue vulputate euismod. Ut auctor feugiat viverra. Nullam sit amet egestas velit, nec scelerisque odio. </p> <p> Pellentesque id dapibus dolor, at lobortis erat. Pellentesque ipsum leo, bibendum at nulla gravida, imperdiet pellentesque metus. Pellentesque a tincidunt justo. Fusce egestas varius sem, eu consequat magna consectetur vitae. Duis euismod sapien quis arcu tempor fermentum. Vivamus a lectus porttitor, rutrum nulla et, euismod orci. Cras luctus, libero sed adipiscing volutpat, lacus purus aliquet lorem, vitae posuere tortor odio in ipsum. In tellus felis, luctus a sem quis, sodales venenatis erat. Etiam quis mollis ante, non sagittis mi. Nam lobortis gravida risus et imperdiet. Donec nec lacinia orci. Nunc commodo, purus quis lobortis facilisis, nisl ante tincidunt leo, vitae malesuada orci nunc sed lorem. Donec luctus tortor in metus commodo suscipit. Duis adipiscing nisi urna, sed accumsan purus bibendum eu. </p> </div> </section> <footer> <h1>Bye Footer</h1> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Page header bar toggle on scroll - Script Codes CSS Codes
* { margin: 0; padding: 0
}
.wrap { background: #f8f8f8;
}
body { font-family: "Open Sans", "Arial", sans-serif; font-size: 16px; line-height: 150%;
}
p { margin: 40px 0;
}
h1 { font-size: 20px; text-align: center;
}
h2 { font-size: 18px;
}
section { min-height: 1000px; padding: 60px 10px;
}
header,
footer { position: fixed; box-sizing: border-box; width: 100%; padding: 10px; background: #eee; height: 50px; transition: all 0.3s ease-in-out; box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px;
}
header { top: 0;
}
footer { bottom: 0;
}
.hideHeader header { top: -50px; opacity: 0;
}
.hideFooter footer { bottom: -50px; opacity: 0;
}Page header bar toggle on scroll - Script Codes JS Codes
$(document).ready(function() { var lastScroll = 0; $(window).scroll(function(e) { var st = $(this).scrollTop(); if (st > lastScroll) { console.log("DOWN"); $('.wrap').addClass('hideHeader').addClass('hideFooter'); } else { console.log("UP"); $('.wrap').removeClass('hideHeader').removeClass('hideFooter'); } lastScroll = st; }); $(document).on('mousemove', function(e) { var y = e.clientY; var h = $(window).height(); var top = y; var bottom = h - y; if (top < 50) { $('.wrap').removeClass('hideHeader'); } if (bottom < 50) { $('.wrap').removeClass('hideFooter'); } })
});
| Developer | Nick Nikolov |
| Username | necks |
| Uploaded | October 17, 2022 |
| Rating | 3 |
| Size | 4,141 Kb |
| Views | 18,216 |
Do you need developer help for Page header bar toggle on scroll?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nick Nikolov (necks) Script Codes
| Name | Size |
| XSellco SVG animated logo | 4,358 Kb |
| Checkbox | 2,493 Kb |
| 4 color border for highlighting feature elements | 4,105 Kb |
| Player Flip Cards | 4,314 Kb |
| CSS Animated Weather icons | 5,145 Kb |
| Moblie friendly top navbar | 3,556 Kb |
| Simple drawer menu | 5,625 Kb |
| A Pen by Nick Nikolov | 1,732 Kb |
| Gallery with blur slide up info on hover | 2,172 Kb |
| Gallery image deck | 2,396 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Toolbar | Onsen | 5,414 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Menubar compass mixin | Michaelparenteau | 4,925 Kb |
| CardMove | Thompsonemerson | 3,699 Kb |
| Tab panels | Accessibility | 0 Kb |
| Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
| Fluid Layout with Float | Jxqr97 | 1,785 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!