In a site I'm developing the top (where the menus are) has the background transparent and is fixed. That is, the site runs behind this top and the top is always fixed.
But as it is transparent ... the site ends up being behind the top when I scroll.
Is there any way to make the site masked? That is ... where this menu does not appear, see the image to explain better:
If you are not going to put anything of background in the menu, then some solutions that I see are:
body{
overflow-y: hidden;
}
#site{ /*esse site aqui é o id da sua div abaixo do topo*/
overflow-y: visible;
}
That is, it will scroll only the bottom div.
Another option would be to use jquery , which would change the color of the words in your fixed menus when scrolling the page:
$(document).ready(function(){
$(document).scroll(function(){
if($(this).scrollTop() > 50){ //quando rolar mais de 50px muda a cor
$('elemento_menu').css('color','blue'); //escolhe a cor que melhor contrastar
}
});
});
