Mask a div with css

Asked

Viewed 90 times

2

On a site that I am developing the top (where the menus are) has a transparent background and is fixed. That is, the site runs behind this top and the top is always fixed.

But as it is transparante... the site ends up being behind the top when I give the scroll.

Is there any way to leave the site masked? IE... where this the menu it does not appear, see the image to explain better:

inserir a descrição da imagem aqui

  • Do you have any functional examples? URL to access or Jsfiddle to better understand?

  • You want the rest of the site not to appear under the menu when scrolling?

1 answer

1


If you’re not gonna put anything on background in the menu, then some solutions I see are:

body{ overflow-y: hidden; }

#site{ /*esse site aqui é o id da sua div abaixo do topo*/ overflow-y: visible; }

I mean, it’s just gonna roll down the div.

Another option would be to use jquery, that would change the color of your fixed menu words 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 } }); });

  • Good idea! But what about the scroll bar? Because the site has a 1000px max-width... and on large monitors the scroll bar will appear inside the site... and not in the corner

Browser other questions tagged

You are not signed in. Login or sign up in order to post.