Posição fixa, mas relativa ao contêiner

639

Estou tentando corrigir um, divpara que ele sempre fique na parte superior da tela, usando:

position: fixed;
top: 0px;
right: 0px;

No entanto, o divestá dentro de um contêiner centrado. Quando eu uso, position:fixedele corrige o divparente da janela do navegador, como no lado direito do navegador. Em vez disso, ele deve ser corrigido em relação ao contêiner.

Eu sei que isso position:absolutepode ser usado para corrigir um elemento em relação ao div, mas quando você rola a página, o elemento desaparece e não fica no topo, como acontece com position:fixed.

Existe um hack ou solução alternativa para conseguir isso?

Zach Nicodemous
fonte
"O Tether é uma biblioteca de interface do usuário de baixo nível que pode ser usada para posicionar qualquer elemento em uma página ao lado de qualquer outro elemento." github.com/shipshapecode/tether + Demos / Docs em tether.io
Kai Noack

Respostas:

408

Resposta curta: não. (Agora é possível com a transformação CSS. Veja a edição abaixo)

Resposta longa: O problema ao usar o posicionamento "fixo" é que ele retira o elemento do fluxo . portanto, não pode ser reposicionado em relação ao pai, porque é como se não tivesse um. Se, no entanto, o contêiner tiver uma largura fixa e conhecida, você poderá usar algo como:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Editar (03/2015):

Esta é uma informação desatualizada. Agora é possível centralizar o conteúdo de um tamanho dinâmico (horizontal e verticalmente) com a ajuda da mágica da transformação CSS3. O mesmo princípio se aplica, mas em vez de usar a margem para compensar seu contêiner, você pode usá-lo translateX(-50%). Isso não funciona com o truque de margem acima, porque você não sabe quanto compensar, a menos que a largura seja fixa e você não possa usar valores relativos (como 50%) porque será relativo ao pai e não ao elemento que é aplicado a. transformse comporta de maneira diferente. Seus valores são relativos ao elemento ao qual são aplicados. Assim, 50%para transformsignifica metade da largura do elemento, enquanto que 50%para margem é metade da largura do pai. Esta é uma solução IE9 +

Usando código semelhante ao exemplo acima, recriei o mesmo cenário usando largura e altura completamente dinâmicas:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Se você deseja que seja centralizado, também pode fazer isso:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demonstrações:

jsFiddle: centralizado horizontalmente apenas
jsFiddle: centralizado horizontal e verticalmente
O crédito original é enviado ao usuário aaronk6 por apontar para mim nesta resposta

Joseph Marikle
fonte
Funcionou lindamente para mim. Embora eu precisasse da minha à esquerda e div já não centrada e não fixada, tive que diminuir a margem esquerda até que ela estivesse alinhada. Não fica alinhado, independentemente da largura das janelas. Obrigado. +1
Iain M Norman
9
@ Joseph alguma idéia por que position:fixedsem especificar topou left às vezes funciona? Alguns navegadores parecem padronizar o elemento para onde ele normalmente estaria, se tivesse um posicionamento normal. stackoverflow.com/questions/8712047/…
Flash
2
e sem altura e largura fixas? No meu caso, não dei largura de sinal a nenhum contêiner, nem mesmo a etiqueta do corpo. Que solução você vai me dizer para fazer.
Mfq 21/02
1
@mfq Infelizmente, esse método não funcionará sem uma altura e largura conhecidas. O que você vai depender depende muito do que você está tentando centralizar. Se for uma imagem, use-a como pano de fundo de um contêiner 100% x 100%. Se é um elemento real que é completamente dinâmico, você provavelmente precisará explorar o uso de uma solução javascript para obter as dimensões.
Joseph Marikle
2
Descobri que adicionar left:inheritao elemento de posição fixa pode forçar o navegador a respeitar o deslocamento do pai.
Willster
180

Na verdade, isso é possível e a resposta aceita lida apenas com a centralização, que é direta o suficiente. Além disso, você realmente não precisa usar JavaScript.

Isso permitirá que você lide com qualquer cenário:

Configure tudo como faria se você deseja posicionar: absoluto dentro de uma posição: contêiner relativo e, em seguida, crie uma nova posição fixa div dentro da div com position: absolute, mas não defina suas propriedades superior e esquerda. Ele será corrigido onde você quiser, em relação ao contêiner.

Por exemplo:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}
<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Infelizmente, eu esperava que esse tópico resolvesse meu problema com os pixels de desfoque de sombra de caixa de renderização do WebKit do Android como margens em elementos de posição fixa, mas parece que é um bug.
Enfim, espero que isso ajude!

Graeme Blackwood
fonte
1
Não é QUALQUER cenário, mas é um bom começo. Se houver muito espaço abaixo do .wrapper, seu invólucro .fixed terminará na parte inferior do pai, mas seu elemento .fixed continuará fluindo dos dois contêineres e para qualquer conteúdo abaixo. Como eu disse, é um bom começo, não é perfeito, mas não vejo como isso pode ser feito sem alguns js.
o_O
4
Isso não combina bem com o design fluido, no entanto.
Zuhaib Ali 28/01
3
Eu tentei fazer isso, mas como e quando eu rolar para baixo, o cabeçalho que eu tinha aplicado fixo (com pai absoluto ao qual pai era relativo) não se moveu enquanto eu rolava.
Mirage
Isso funcionou para mim com uma div superior direita no Chromium e Firefox, exceto que as posições verticais da div fixa eram diferentes (no Chromium, ele estava no topo da div pai, no Firefox, dentro).
Damien
2
Esta foi a resposta para mim! Obrigado @Graeme Blackwood
Tabu.Net
136

Sim, de acordo com as especificações, existe um caminho.

Enquanto eu concordo que Graeme Blackwood deve ser a resposta aceita, porque praticamente resolve o problema, note-se que um elemento fixo pode ser posicionado relativamente ao seu contêiner.

Notei por acidente que, ao aplicar

-webkit-transform: translateZ(0);

para o corpo, ele criou um filho fixo em relação a ele (em vez da janela de exibição). Portanto, meus elementos lefte toppropriedades fixos agora eram relativos ao contêiner.

Então, fiz uma pesquisa e descobri que o problema já havia sido coberto por Eric Meyer e, mesmo que parecesse um "truque", verifica-se que isso faz parte das especificações:

Para elementos cujo layout é governado pelo modelo de caixa CSS, qualquer valor diferente de nenhum para a transformação resulta na criação de um contexto de empilhamento e de um bloco contendo. O objeto atua como um bloco de contenção para descendentes posicionados fixos.

http://www.w3.org/TR/css3-transforms/

Portanto, se você aplicar alguma transformação a um elemento pai, ele se tornará o bloco que contém.

Mas...

O problema é que a implementação parece defeituosa / criativa, porque os elementos também param de se comportar como corrigidos (mesmo que esse bit não pareça fazer parte da especificação).

O mesmo comportamento será encontrado no Safari, Chrome e Firefox, mas não no IE11 (onde o elemento fixo ainda permanecerá fixo).

Outra coisa interessante (não documentada) é que quando um elemento fixo está contido dentro de um elemento transformado, enquanto suas propriedades tope leftagora estarão relacionadas ao contêiner, respeitando a box-sizingpropriedade, seu contexto de rolagem se estenderá sobre a borda do elemento, como se a caixa -sizing foi definido como border-box. Para alguns criativos por aí, isso pode se tornar um brinquedo :)

TESTE

Francesco Frapporti
fonte
4
Isto permitiu-me para criar uma tabela com cabeçalhos fixos dentro de um recipiente
Zach Saucier
Bom, isso funciona para mim no Chrome. Alguma idéia de como conseguir o mesmo no IE? Eu tentei usar o translateZ, mas isso não ocorreu em nenhuma versão do IE.
Anish Patel
Mesmo .. alguém sabe como fazer isso no IE? seu tipo de dor para detectar o navegador, em seguida, mostrar sistematicamente ou não mostrar left:(considerando que messes-lo)
Tallboy
Apenas atendo à condição oposta que eu preciso fixar no contêiner relativo, mas alterada pela propriedade transform. Sua resposta é muito útil, obrigado!
mytharcher
8
@Francesco Frapporti parece que isso não funciona mais ... na versão mais recente do Chrome de qualquer maneira (Versão 42.0.2311.90) :(
jjenzz
60

A resposta é sim, desde que você não defina left: 0ou right: 0depois de definir a posição div como fixa.

http://jsfiddle.net/T2PL5/85/

Faça o check-out da div da barra lateral. É fixo, mas relacionado ao pai, não ao ponto de vista da janela.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>
Shadow_boi
fonte
12
Alguma razão para isso não ter mais votos positivos? Parece a solução mais óbvia para mim.
26314 Rastreio
E a compatibilidade entre navegadores. Algum de vocês verificou isso?
Alexandre Bourlier
3
Isso está correto, mas apenas para o 'posicionamento' do elemento fixo. Não respeitará a largura do contêiner nem será redimensionado de forma alguma. Por exemplo, se você tiver um invólucro de fluido com largura máxima: 1000 px; margem: auto; isso não vai funcionar. Se tudo puder ter uma largura fixa, sim, isso resolverá o seu problema.
Rhys
3
@AlexandreBourlier Sim, isso funcionou bem para mim para um elemento fixo no Chrome, Firefox e IE11, pelo menos.
Jason Frank
Funcionou perfeitamente. Teve que adicionar margem esquerda: X% para trazer o elemento à direita do contêiner
Anand
45

position: stickyessa é uma nova maneira de posicionar elementos conceitualmente semelhantes a position: fixed. A diferença é que um elemento position: stickyse comporta como position: relativedentro de seu pai, até que um determinado limite de deslocamento seja atingido na janela de exibição.

Na posição do Chrome 56 (atualmente beta em dezembro de 2016, estável em janeiro de 2017): sticky está de volta.

https://developers.google.com/web/updates/2016/12/position-sticky

Mais detalhes estão em Stick your landing! position: terras pegajosas no WebKit .

PoseLab
fonte
Isso facilita muito a vida, o único problema é que o adesivo não é suportado no Internet Explorer ou Edge 15 e versões anteriores.
Ricks
1
position:stickyé ótimo. Compatível com todos os navegadores, exceto o IE caniuse.com/#feat=css-sticky
Yarin
lol, api tão antiga, e você salva meu dia ... estou usando para colunas fixas para tabelas flexíveis.
Vladislav Gritsenko
1
"dentro de seu pai" - é possível manter o elemento adesivo no topo, se o pai rolado para cima se tornou invisível?
Fikret
27

2019 SOLUÇÃO: Você pode usar a position: stickypropriedade.

Aqui está um exemplo de CODEPEN demonstrando o uso e também como ele difere position: fixed.

Como se comporta é explicado abaixo:

  1. Um elemento com posição de aderência é posicionado com base na posição de rolagem do usuário. Ele basicamente age como position: relativeaté que um elemento seja rolado além de um deslocamento específico; nesse caso, ele se transforma na posição: fixo. Quando é rolado para trás, volta à sua posição anterior (relativa).

  2. Isso afeta o fluxo de outros elementos na página, ou seja, ocupa um espaço específico na página (assim como position: relative).

  3. Se for definido dentro de algum contêiner, será posicionado em relação a esse contêiner. Se o contêiner estiver com excesso (rolagem), dependendo do deslocamento da rolagem, ele se transformará na posição: fixo.

Portanto, se você deseja obter a funcionalidade fixa, mas dentro de um contêiner, use adesivo.

Pransh Tiwari
fonte
Ótima solução. Eu ainda não sabia position: sticky. Ajudou muito, obrigado!
Dave0688 08/08/19
Eu estava para publicar isto. Boa resposta! pegajoso é o caminho.
dkellner 15/04
Se você aumentar o tamanho da janela de saída no Codepen, o elemento fixo não será fixo, mas será movido para cima. Não é bom. Uma solução melhor o mantém ancorado na parte inferior da janela de visualização.
AndroidDev
@AndroidDev Apenas o elemento superior está definido para ser corrigido para a página inteira. Está sendo renderizado conforme desejado. Os outros elementos são exemplos explicativos para diferentes casos.
Pransh Tiwari
18

Apenas retire os estilos superior e esquerdo da div da posição fixa. Aqui está um exemplo

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

A div #content ficará onde quer que a div pai esteja, mas será corrigida lá.

hobberwickey
fonte
3
Por que o menos? Isso funciona perfeitamente para corrigir um elemento onde você quiser no fluxo do DOM. deadlykitten.com/tests/fixedPositionTest.php
hobberwickey
18

Eu criei este plugin jQuery para resolver um problema semelhante que eu estava tendo em um contêiner centralizado (dados tabulares) e queria que o cabeçalho fosse corrigido na parte superior da página quando a lista fosse rolada, mas queria que ele estivesse ancorado em os dados tabulares para que estejam onde eu coloco o contêiner (centralizado, esquerdo, direito) e também permitimos que ele se mova para a esquerda e direita com a página quando rolada horizontalmente.

Aqui está o link para este plugin jQuery que pode resolver esse problema:

https://github.com/bigspotteddog/ScrollToFixed

A descrição deste plugin é a seguinte:

Este plug-in é usado para fixar elementos na parte superior da página, se o elemento tivesse rolado fora da vista, verticalmente; no entanto, ele permite que o elemento continue se movendo para a esquerda ou direita com a rolagem horizontal.

Dada a opção marginTop, o elemento irá parar de se mover verticalmente para cima quando a rolagem vertical atingir a posição de destino; mas, o elemento ainda se moverá horizontalmente à medida que a página for rolada para a esquerda ou direita. Depois que a página for rolada de volta para baixo na posição de destino, o elemento será restaurado para sua posição original na página.

Este plug-in foi testado no Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para o seu caso particular:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});
bigspotteddog
fonte
12

Eu tive que fazer isso com um anúncio que meu cliente queria ficar fora da área de conteúdo. Eu simplesmente fiz o seguinte e funcionou como um encanto!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>
Eric K
fonte
Meu anúncio tinha 140px de largura, então eu o movi 150px para a esquerda para dar um pouco de margem direita contra a borda do quadro do site.
Eric K
7

Dois elementos HTML e CSS puro (navegadores modernos)

Veja este exemplo do jsFiddle. Redimensione e veja como os elementos fixos se movem com os elementos flutuantes em que estão. Use a barra de rolagem mais interna para ver como o rolagem funcionaria em um site (os elementos fixos permanecem fixos).

Como muitos aqui afirmaram, uma chave não está definindo todas as configurações de posição sobre o fixedelemento (há top, right, bottom, ou leftvalores).

Em vez disso, colocamos todos os elementos fixos (observe como a última caixa tem quatro deles) primeiro na caixa em que devem ser posicionados, da seguinte forma:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Em seguida, usamos margin-tope margin-left"movemos" eles em relação ao contêiner, algo como este CSS:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Observe que, como os fixedelementos ignoram todos os outros elementos de layout, o contêiner final em nosso violino pode ter vários fixedelementos e ainda ter todos esses elementos relacionados ao canto superior esquerdo. Mas isso só é verdade se todos eles forem colocados primeiro no contêiner, pois esse violino de comparação mostra que, se disperso no conteúdo do contêiner, o posicionamento se torna não confiável .

Se o wrapper é estático , relativo ou absoluto no posicionamento, isso não importa.

ScottS
fonte
3

Você pode tentar o meu plugin jQuery, FixTo .

Uso:

$('#mydiv').fixTo('#centeredContainer');
Burak
fonte
2

Outra solução estranha para alcançar uma posição fixa relativa é converter seu contêiner em um iframe, para que seu elemento fixo possa ser corrigido na janela de visualização do contêiner e não na página inteira.

Beto Aveiga
fonte
2

Com CSS puro, você não consegue fazer isso; pelo menos eu não tenho. No entanto, você pode fazer isso com o jQuery de maneira muito simples. Vou explicar o meu problema e, com uma pequena alteração, você pode usá-lo.

Então, para começar, eu queria que meu elemento tivesse um topo fixo (da parte superior da janela) e um componente esquerdo para herdar do elemento pai (porque o elemento pai está centralizado). Para definir o componente esquerdo, basta colocar seu elemento no pai e definir position:relativeo elemento pai.

Então você precisa saber quanto de cima seu elemento está quando a barra de rolagem está no topo (y zero rolado); existem duas opções novamente. Primeiro é que é estático (algum número) ou você deve lê-lo no elemento pai.

No meu caso, são 150 pixels da parte superior estática. Então, quando você vê 150, é quanto custa o elemento do topo quando não rolamos.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});
Mr Br
fonte
O problema é que a div em questão pisca ao rolar.
vvohra87
Provavelmente porque a rolagem está atualizando muito ou muito rápido. Eu não tive esse problema, mas posso sugerir que você tente usar o "bloqueador" global que seria atualizado por exemplo a cada 10ms ou em algum momento e definido como valor de bloqueio toda vez que você fizer alguma alteração de altura. É claro que você deve adicionar a condição if ao evento .scroll que está verificando se, nesse período (10 ms), você já rolou div. Repito que não tentei, mas acredito que poderia funcionar :) Dessa maneira, você pode impedir que o div mude de posição demais para que o computador não possa realmente seguir, e o suficiente para que o olho humano veja.
Sr. Br
Eu já dei a sua resposta +1 companheiro;) A dor de anexar um método de loop global é realmente desempenho. Conseguir que algo assim funcione bem em computadores e tablets antigos é doloroso. Muitas vezes, um desenvolvedor júnior no trabalho escreveu um 'var x' dentro desse método, resultando em vazamentos desnecessários de memória se a página ficar aberta por muito tempo: P Mas sim, sua sugestão parece ser a única opção real .
vvohra87
Você tem razão com loops globais; não é bom, eu concordo. Eu só gosto de pensar nesse tipo de problema, por isso escrevi outra sugestão :) Tbh, agora parecendo um pouco melhor, eu evitaria xD Eu tenho outra solução agora. O que você diz sobre a configuração de setTimeout () no evento de rolagem que chama func. que faz o movimento div ... você também usa o bloqueador global que é definido como verdadeiro enquanto aguarda o tempo limite e quando o tempo limite é chamado, você retorna o bloqueador para false, o que permite outra chamada depois de algum tempo ... dessa forma, você não usaria o loop global mas ainda tem controle sobre a frequência do movimento div.
Sr. Br
É mais elegante, mas acho difícil aceitar. Esse é o tipo de coisa que eu espero que as especificações html e css manejem tbh. Odeio o fato de que js está envolvido em primeiro lugar!
precisa saber é o seguinte
1

Isso é fácil (conforme HTML abaixo)

O truque é NÃO usar a parte superior ou esquerda do elemento (div) com "position: fixed;". Se estes não forem especificados, o elemento "conteúdo fixo" aparecerá RELATIVO ao elemento envolvente (a div com "posição: relativa;") EM VEZ DE relativo à janela do navegador !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Acima, foi possível localizar um botão "X" de fechamento na parte superior de muito texto em uma div com rolagem vertical. O "X" fica no lugar (não se move com o texto rolado e, no entanto, se move para a esquerda ou para a direita com o contêiner div incluído quando o usuário redimensiona a largura da janela do navegador! Portanto, é "fixo" na vertical, mas posicionado em relação a o elemento de fechamento horizontalmente!

Antes de começar a trabalhar, o "X" rolava para cima e para fora da vista quando rolava o conteúdo do texto para baixo.

Desculpas por não fornecer minha função hideDiv () do javascript, mas desnecessariamente tornaria esta postagem mais longa. Optei por mantê-lo o mais curto possível.

Bruce Allen
fonte
Solução sólida para vários navegadores, funciona no IE8 como um encanto.
Dll3y
1

Eu criei um jsfiddle para demonstrar como isso funciona usando a transformação.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Wen
fonte
1

Eu tenho o mesmo problema, um dos membros da nossa equipe me fornece uma solução. Para permitir a posição de correção div e em relação a outras div, nossa solução é usar um contêiner pai que envolve a correção div e rolar div.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}
Jay0Lu
fonte
1
/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}
Carol McKay
fonte
1

Sim, é possível desde que você não defina a posição ( topou leftetc.) do seu fixedelemento (você ainda pode usar marginpara definir uma posição relativa). Simon Bos postou sobre isso há um tempo atrás .

No entanto, não espere que o elemento fixo role com parentes não fixos.

Veja uma demonstração aqui .

Javarome
fonte
0

Eu fiz algo assim por algum tempo. Eu era muito novo no JavaScript, então tenho certeza que você pode fazer melhor, mas aqui está um ponto de partida:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Você precisará definir sua largura e, em seguida, ela obtém a largura da janela e altera a margem a cada poucos segundos. Eu sei que é pesado, mas funciona.

webLacky3rdClass
fonte
Um problema que vejo com essa abordagem é que ele depende de um timer (2,5 segundos) e, durante esse período, se o usuário redimensionar a janela, levará um tempo para que ele se corrija. Essa não é a melhor coisa quando se trata da experiência do usuário. Além disso, se puder ser ajudado, tente usar ouvintes de eventos em vez de temporizadores.
Joseph Marikle
Como eu disse, era um script antigo, um dos meus primeiros, e não precisava voltar atrás para corrigi-lo. Portanto, não é o melhor, mas pode ser um bom ponto de partida.
WebLacky3rdClass
0

É possível se você usar JavaScript. Nesse caso, o plugin Sticky-Kit do jQuery :

Paz Aricha
fonte
0

Meu projeto é o modelo .NET ASP Core 2 MVC Angular 4 do .NET com Bootstrap 4. A adição de "sticky-top" ao componente principal do aplicativo html (por exemplo, app.component.html) na primeira linha funcionou da seguinte forma:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Essa é a convenção ou simplifiquei demais isso?

Adam Cox
fonte
0

Quando você usa a position:fixedregra CSS e tenta aplicar top/ left/ right/ bottomit, posicione o elemento em relação à janela.

Uma solução alternativa é usar marginpropriedades em vez de top/ left/ right/bottom

Sunil Garg
fonte
-1

Verifique isto:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>
Kunal
fonte
5
Eu não acho que isso esteja cumprindo exatamente o que o OP perguntou.
26412 JasonWyatt