CSS ou barra lateral fixa do jQuery no layout do site

StackOverflow https://stackoverflow.com/questions/1313365

  •  19-09-2019
  •  | 
  •  

Pergunta

Meu site está configurado com a estrutura de conteúdo como esta

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

Estou tentando fazer meu site se comportar onde a barra lateral permanece exatamente no mesmo local em relação a onde estaria no meu layout estático. Que é à direita da coluna de conteúdo, que está abaixo da div e acima do rodapé e que, se eles encolhem a janela horizontalmente, ele não se move na parte superior da coluna de conteúdo.

Eu experimentei a posição fixa do Google Genic CSS etc. e não consegui encontrar nada que realmente estivesse funcionando comigo, então isso me leva a perguntar aqui. Estou procurando como lidar com isso com CSS ou JavaScript, se seguir a rota JavaScript, eu prefiro o jQuery como base.

Editar Não preciso apoiar os navegadores do ARCHIAC, mas não me importo se funcionar totalmente no IE6, desde que não arruine minha página e se degrada aceravelmente (como se não fique no lado errado da página ou no topo meu cabeçalho ou conteúdo)

Foi útil?

Solução

No final, fui com uma solução JavaScript, onde comecei antes de vir e postar aqui foi

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

O que funcionou e produziu o resultado que eu queria, no entanto, era muito carente no efeito que alcançou, porque era muito espumoso e desagradável de assistir.

Fiz mais um pouco de pesquisador hoje e me deparei com este post: Caixa de mensagens flutuante superior usando jQuery. O que me levou a aqui

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

Que produz um bom efeito de rolagem limpa da minha barra lateral, a flexibilização da minha opinião é o que realmente ajuda a se sentir polido.

Outras dicas

Tente ter seu conteúdo DIV Roll com o conteúdo em vez de expandir a altura em termos de altura e causar barras de rolagem para toda a página. Dessa forma, seu layout permanecerá o mesmo, não importa o tamanho do conteúdo, e a seção de conteúdo receberá barras de rolagem

#content {
   overflow:auto;
}

Isso deve funcionar para você.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top