1

Galera alguém sabe como posso fazer que um elemento com position: fixed; seja responsivo. Ou seja, o conteúdo a esquerda permanece a esquerda e o conteúdo da direita, quando redimensionado, permanece na direita sem que fique off-canvas?

Isso é um esboço do que estou tentando fazer:

HTML

<header>
  <div class="content">
    <img src="http://seeklogo.com/images/L/Light_Logomarca-logo-0C4DF9D65C-seeklogo.com.gif" alt="logo" />
    <ul class="menu">
       <li>menu-item</li>
       <li>menu-item</li>
       <li>menu-item</li>
    </ul>
  </div>
</header>
<main>
  <div class="content">
  <h1>Conteúdo</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
  </div>
</main>

CSS

header {
   position: fixed;
   top: 0;
   width: 100%;  
   min-width: 700px;
   border: 1px solid black;
   background-color: #ccc;
}
.logo {
   display: inline-block;
}
img {
   float: left;
   width: 70px;
   height: 70px;
   max-width: 100%; 
}
.menu {
   float: right;
}
.menu li {
   display: inline-block;
   border: 1px solid black;
   padding: 5px;
}
.content {
   width: 700px;
   margin: 0 auto;
}
main {
   margin-top: 150px;
}

Consegui o efeito desejado trocando o position: fixed; para position: absolute;, só que cabeçalho não fica fixo no topo da tela.

CODEPEN com o código editável.

9
  • Poste o código do que já fez até o momento
    – Bia
    Commented 8/01/2016 às 9:01
  • @Bia na descrição da pergunta tem um link para o codepen.io com o código feito até o momento. Está neste link codepen.io/luandacostadf/pen/mVmyYd?editors=110 Commented 8/01/2016 às 10:27
  • @LuandaCostaSilva li várias vezes, mas não consegui entender o que você quer fazer, seja mais específico, tentarei te ajudar.
    – Tamiris
    Commented 8/01/2016 às 18:25
  • 1
    @LuandaCostaSilva você já ouviu falar sobre media queries? Veja a minha alteração aqui jsfiddle.net/f3t4foL0 - Lembrando que essa é uma "solução" expressa e que serve mais para fazê-lo entender o que são os Media Queries e o que é Responsivo. Commented 8/01/2016 às 19:13
  • 1
    Onde está o código? O site possui ferramenta para postagem de códigos, não é recomendado que poste externamente, a não ser como informação adicional a um código já postado aqui.
    – user28595
    Commented 8/01/2016 às 19:13

3 Respostas 3

2

O que você está errando é em relação a estrutura das tag's que está usando e também falta a tag overflow-x:auto a ser declarada no seu content. Eu peguei seu exemplo e corrigi, veja como ficou >>aqui<<.

0

"... então, eu não posso ter um menu responsivo, a ideia é que a barra de rolagem horizontal exista, mas como mostra na imagem o conteúdo do header não acompanha essa barra, para entender melhor veja: jsfiddle.net/LuanCostaSilva/xqkytsbn, agora redimensione a página até criar um barra horizontal, agora deslize a barra horizontal até o final, viu? você não ve o conteúdo do menu, agora troque de fixed para absolute e faça a mesma coisa, o conteúdo aparece mas o cabeçalho não fica sempre no topo. Alguma solução? – Luan da Costa Silva"

@LuandaCostaSilva a linguagem CSS não permite que você torne um elemento parcialmente fixo. Você definitivamente precisa de algo como a linguagem javascript para rolar o elemento apenas Horizontalmente e fixo na rolagem Vertical, mas mesmo dessa forma, você não vai conseguir rolagem suave. Por favor, dê uma olhada neste exemplo que eu escrevi para você:

Clicando aqui jsfiddle.net/RodrigoCarioca/

Uma breve explicação:

Como o CSS não permite que um elemento seja definido como fixed acompanhe a rolagem de eixo X, eu defini ele como absolute. No Java Script criei duas funções concatenadas a propriedade do browser, a window: uma para retornar o valor de rolagem do topo da pagina, e outra pra somar esse valor ao position da tag header.

Deixei também parte do código para caso queira o mesmo processo para um elemento que precise acompanhar a rolagem do eixo Y (mas ai cabe a você criar a função de soma seja pra left ou right).

2
  • Exatamente o comportamento que eu estava procurando, muito obrigado, ainda sou muito novato em javascript , se puder dar uma breve explicação do que você fez para que eu possa explicar para alguns colegas o que o código faz eu fico muito agradecido. Ah mais uma pergunta, esse código javascript funciona no IE7 / IE8? Commented 12/01/2016 às 14:22
  • Editado com explicação @LuandaCostaSilva Commented 15/01/2016 às 19:47
0

Vamos as especificações do que é um position: fixed;:

O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente.

Bem, pela especificação da pra entender que ele se fixa na página e segue o overflow se ativo.

A propriedade position: fixed; termina junto a largura ou altura da página, ou seja, se sua página for menor que a largura da sua div, parte dela deixará de existir junto com a página, já que com essa propriedade tornam-se um único objeto.

0

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 .