SCRIPT Sticky menu


Webdesign | 4-04-2014 | Pascal Merks | Reacties


Wat ik vaker tegen kom op website is dat als je de website scrolt het menu boven in de website blijft plakken. Ik ben toen gaan uitzoeken hoe dat op een simpele manier kan en het is mij gelukt!

Demo link: http://pmkmedia.nl/uploads/demos/sticky-menu.html

In feiten zijn het 2 menus de 1ste heeft ID "menu" en het menu wat moet blijven plakken heeft ID "sticky-menu". Ze hebben allebij de zelfde style alleen voor het menu wat vast moet blijven plakken zijn een paar regeltjes extra nodig:

Code:

top: 0;
position: fixed;
z-index: 1000;
display: none;

 

Dit zorg er voor dat hij boven in het scherm blijft staan en over de website heen staat met z-index. Display none is om er voor te zorgen dat hij niet zichtbaar is. Dit gaan we regelen tijdens het scrollen via een jQuery.

Boven het menu zit een header DIV van 200px (je kan je eigen header hoogte natuurlijk gebruiken). Door naar benede te scrollen zorgt het script er voor dat als je 200px naar beneden scrolt het "sticky-menu" tevoorschijn komt en als je weer terug scrolt hij weer verdwijnt.

Code:

<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() > 200){
$("#sticky-menu").slideDown(0);
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 200){
$("#sticky-menu").slideUp(0);
}
});
</script>

 

Pas in het script wel je eige header hoogte aan in mijn gevan 200 omdat de header 200px is.

Simpel en doet wat het moet doen!

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets