0

Boa noite, sei que essa dúvida já foi respondida aqui várias vezes, mas nenhuma delas funcionaram pra mim e explicarei o porquê.

Em todas as soluções apresentadas faz-se necessário alterar o parâmetro position: relative; para position: fixed;, porém essa configuração traz o inconveniente de ter que fazer a centralização manual da Div, especificando seus valores em px ou noutro parâmetro, o width, que deveria estar width: auto;, pois se tirar de auto, a Div da barra de menu não se auto dimensiona de acordo com o redimensionamento da janela do navegador com o mouse, ou com o formato da dela do pc do usuário.

Por isso gostaria de uma solução puramente javascript para esse caso, sem CSS. Detalhe, desejo apenas fixar, sem nenhum efeito adicional como animações, etc... Desde já agradeço.

2
  • 3
    Está um pouco difícil de entender o que realmente estás a tentar fazer... o width:100%; não resolve o seu problema? Adicione o código de aquilo que você já tentou, não precisa ser completo, apenas a barra de menu e como queria que ela ficasse/se adaptasse.
    – Chun
    Commented 17/09/2016 às 2:17
  • Seguinte, eu criei uma div menu com tamanho fixo de width: 1000px; com centralização automática na tela através do position: auto; Com isso, sempre que clico na borda do navegador e arrasto diminuindo ou aumentando o tamanho da janela, o objeto se auto ajusta e sempre fica no centro. O que preciso é fixar ela para não rolar, mas se eu altero o valor de position: auto; para position: fixed; o objeto só fica no canto esquerdo, tendo que especificar manualmente a posição da div. o que impede que ao redimencionar a janela, ela se auto centralize no navegador.
    – Vicentte
    Commented 19/09/2016 às 19:40

3 Respostas 3

1

O único jeito de "fixar" com javascript é escutando o scroll da pagina e atualizando a posição do elemento em tempo real, mas isso sempre vai gerar uma piscada estranha no elemento, para ficar realmente fixo só com o position: fixed;

$(window).scroll(function() {
  $('.fixa').css({"top": $(window).scrollTop() });
});
.conteudo {
  background-color: LightBlue;
  height: 2000px;
 }
.fixa {
  position: relative;
  background-color: ivory;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
  <div class="fixa">
    fixa!  
  </div>
  conteudo...
</div>

0

Essa sua div possui width fixo? Se tiver, você pode centralizar com CSS:

div.centralizada {
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

Você tem que usar o left com 50% e "puxar" a div a metade do seu tamanho: no exemplo acima a div tem um width de 300 então o margin-left é 150, que é a metade e 300. Se a div tiver width 600 então o margin-left seria 300. Acho que deu pra entender...

1
  • Obrigado caro colega, mas no meu texto deixei claro que não posso usar essa opção "position: fixed;" porque tira a centralização automática do conteúdo quando redimensionamos o a janela do navegador.
    – Vicentte
    Commented 19/09/2016 às 18:49
0

Você pode criar uma div com a height e width que você deseja:

Ex:

.conteudo{
 height: 100px;
 width: 100px;
}

Depois é só criar outra div com o seguinte code:

.centred{
 display: flex; //Exibe um elemento como um recipiente flexível em nível de bloco . Novo em CSS3.
 flex-direction: row; //Valor padrão. Os itens flexíveis são exibidas horizontalmente , como uma linha.
 flex-wrap: wrap; //Valor padrão. Especifica que os itens flexíveis não será moldado.
 align-content: center; //As linhas são embalados na direcção do centro do recipiente flexível.
 align-items: center; //Os produtos são posicionadas no centro do recipiente.
}

Exemplo de uso:

.conteudo{
 height: 100px;
 width: 100px;
}

.centred{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-content: center;
 align-items: center;
}
<div class="conteudo">
  <div class="centred">
    Eu estou Testando...
  </div>  
</div>

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 .