I have a horizontal menu that sticks to the top of web browser after you scroll past it. To make it happen i'm using javascript (jquery). Now i want to hide that menu and show mobile menu at certain resolution, but when i give "display: none" to menu classes, it only hides original menu.
If i set .original or .menu to "display:none" it hides original static menu, and fixed menu sticks to the top of web browser immediately (you don't have to scroll).
Setting .cloned to "display:none" doesn't do anything.
How to get rid of that fixed menu ?
Script:
<script>
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
CSS:
@media screen and (max-width:960px){
.cloned {
display: none;
}
.original {
display: none;
}
.menu {
display: none;
}
#navi {
display: none;
}
#content {
width: 90%;
}
}
EDIT:
jsfiddle: https://jsfiddle.net/765kadoj/3/
Aucun commentaire:
Enregistrer un commentaire