2

Em um site que estou desenvolvendo o topo (onde estão os menus) tem o fundo transparente e é fixo. Ou seja, o site roda por trás desse topo e o topo fica sempre fixo.

Mas como ele é transparante... o site acaba ficando atras do topo quando dou o scroll.

Existe alguma forma de deixar o site mascarado? Ou seja... onde esta o menu ele não aparece, veja a imagem para explica melhor:

inserir a descrição da imagem aqui

2
  • Você tem algum exemplo funcional? URL para acessar ou JSFiddle para entender melhor? Commented 25/09/2017 às 19:52
  • Você quer que o resto do site não apareça por baixo do menu quando fizer rolagem?
    – Sam
    Commented 25/09/2017 às 23:06

1 Resposta 1

1

Se você não vai colocar nada de background no menu, então algumas soluções que vejo são:

body{ overflow-y: hidden; }

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

Ou seja, vai rolar apenas a div de baixo.

Outra opção seria utilizar jquery, que alteraria a cor das palavras do seu menus fixo ao rolar a página:

$(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 } }); });

1
  • Boa ideia! Mas e a barra de rolagem? Pois o site tem um max-width de 1000px... e em monitores grandes a barra de rolagem vai aparecer dentro do site... e não no canto Commented 25/09/2017 às 19:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .