CSS: posição fixa no eixo x, mas não y?

104

Existe uma maneira de fixar uma posição apenas no eixo x? Portanto, quando um usuário rola para cima, a tag div rola para cima com ela, mas não para os lados?

Kylex
fonte
3
Tudo bem se eu der uma solução JS para esse problema?
Starx
1
Você precisa de javascript para fazer isso.
LostLin
@Starx - não é apenas OK, é obrigatório :-)
Pete Wilson
Recentemente respondi a uma pergunta semelhante que pode ser mais parecida com o que você está procurando: stackoverflow.com/questions/8673560/…
Wex
Eu sei que é uma pergunta bem antiga, mas você ainda está tendo problemas com esta pergunta?
Starx

Respostas:

58

É uma técnica simples usando o script também. Você pode verificar uma demonstração aqui também.

JQuery

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

CSS

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Crédito de atualização : @ PierredeLESPINAY

Conforme comentado, para fazer o script suportar as mudanças no css sem ter que recodificá-las no script. Você pode usar o seguinte.

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset //Use it later
    });
});

Demo :)

Starx
fonte
@PeteWilson, Ok, verifique esta solução
Starx
2
O que você acha de obter o leftvalor no início da função como init_left = $('#header').position()['left']ou algo semelhante?
Pierre de LESPINAY
@PierredeLESPINAY, Sim, muito bom ponto. Isso o tornaria flexível o suficiente para suportar as mudanças.
Starx 01 de
2
Adoro esta solução e só a usei. No entanto, um problema que tenho com isso é que as atualizações são meio instáveis ​​quando você faz uma rolagem suave (por exemplo: arrastando a barra de rolagem). Parece que a atualização do javascript é mais lenta do que a atualização do CSS. Alguma solução para isso?
jsarma
17

Este é um tópico antigo, mas CSS3 tem uma solução.

position: sticky;

Dê uma olhada nesta postagem do blog.

Demonstração:

animação fixa de posição css

E esta documentação.

frágil
fonte
1
Passei anos procurando uma solução para isso, sua resposta se encaixa perfeitamente às minhas necessidades.
Christopher Shaw
6
Isso é bom para coisas verticais, mas não funciona para rolagem horizontal.
Cullub 01 de
10
Isso não responde à pergunta de forma alguma.
Alohci
12

Se o seu bloco está originalmente posicionado como estático, você pode tentar isto

$(window).on('scroll', function () {

  var $w = $(window);
  $('.position-fixed-x').css('left', $w.scrollLeft());
  $('.position-fixed-y').css('top', $w.scrollTop());

});
.container {
  width: 1000px;
}

.position-fixed-x {
  position: relative; 
}

.position-fixed-y {
  position: relative;
}

.blue-box {
  background:blue;
  width: 50px;
  height: 50px;
}

.red-box {
  background: red;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<div class="position-fixed-y red-box">
  
</div>

The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism. DNA, or deoxyribonucleic acid, is found within most cells of an organism, and most organisms have their own unique DNA code. One exception to this is cloned organisms, which have the same exact DNA code as their parents do.

<div class="position-fixed-x blue-box">
  
</div>

DNA strands are composed of millions of sub-units, called nucleotides. Each nucleotide contains a 5-carbon sugar, a phosphate group and a nitrogen base. There are four different variations of the nitrogen base group, responsible for all of the variation between two different DNA strands. The four different variations are called adenine, guanine, cytosine and thymine, but they are typically abbreviated and only referred to by their first letter. The sequence of these different nitrogen bases makes up the code of the DNA.

The DNA strand splits in two, and forms two different DNA strands during cell replication. However, sometimes this process is not perfect, and mistakes occur. These mistakes may change the way an organism is constructed or functions. When this happens, it is called a mutation. These mutations can be helpful or harmful, and they are usually passed on to the organism’s offspring.
  
 The traits of a living thing depend on the complex mixture of interacting components inside it. Proteins do much of the chemical work inside cells, so they largely determine what those traits are. But those proteins owe their existence to the DNA (deoxyribonucleic acid), so that is where we must look for the answer.
The easiest way to understand how DNA is organized is to start with its basic building blocks. DNA consists of four different sugars that interact with each other in specific ways. These four sugars are called nucleotide bases and have the names adenine (A), thymine (T), cytosine (C) and guanine (G). Think of these four bases as letters in an alphabet, the alphabet of life!
If we hook up these nucleotides into a sequence--for example, GATCATCCG--we now have a little piece of DNA, or a very short word. A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence, or gene, that describes how to build a protein. And a still longer piece of DNA could contain information about when that protein should be made. All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human (or an animal, a plant, or a microorganism).
Of course, the details are a little more complicated than that! In practice, active stretches of DNA must be copied as a similar message molecule called RNA. The words in the RNA then need to be "read" to produce the proteins, which are themselves stretches of words made up of a different alphabet, the amino acid alphabet. Nobel laureates Linus Pauling, who discerned the structure of proteins, and James Watson and Francis Crick, who later deciphered the helical structure of DNA, helped us to understand this "Central Dogma" of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein: DNA -> RNA -> Protein.
To understand how this all comes together, consider the trait for blue eyes. DNA for a blue-eyes gene is copied as a blue-eyes RNA message. That message is then translated into the blue protein pigments found in the cells of the eye. For every trait we have--eye color, skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein. Sperm cells and eggs cells are specialized to carry DNA in such a way that, at fertilization, a new individual with traits from both its mother and father is created.
</div>

Ambienthack
fonte
8

Não, não é possível com CSS puro. Esse tipo de posicionamento fixa o elemento na janela de visualização. Eu sugiro simplesmente fixar o elemento em um dos lados da janela de visualização (ou seja, superior, inferior, esquerdo ou direito) para que ele não interfira com outro conteúdo.

DisgruntledGoat
fonte
7

Agora que mais de 70% do mercado de internet tem celulares, você pode criar algo inteligente e ágil para fazer isso.

Você pode criar isso muito facilmente com apenas css, use um overflow-x: scroll para um contêiner e um overflow-y: scroll para outro contêiner. Você pode posicionar facilmente os elementos do contêiner com largura: 100vw e altura: 100vh.

Clique com o botão do meio no exemplo para testá-lo. Funciona melhor no celular porque você não vê as barras de rolagem.

body{max-width:100%}
*{box-sizing:border-box;}
.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}
.header{background: pink;}
.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}
.body >div{min-width:800px;}
<body>
  <div class="container">
    <div class="header">
       Button 1 > Button 2 > Button 3
    </div>
    <div class="body">
      <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     </div>
    </div>
  </div>
</body>

EPurpl3
fonte
Não gosto que a barra de rolagem inferior fique visível apenas ao rolar para o pé ...
Fanky
Em um navegador móvel, ele não aparecerá. No Chrome, você pode ocultá-lo com este CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. No Firefox, você pode ocultá-lo colocando-o fora de um overflow:hiddencontêiner. Mas essa é outra pergunta que já foi respondida antes, tenho certeza disso.
EPurpl3
2

A solução de Starx foi extremamente útil para mim. Mas eu tive alguns problemas quando tentei implementar uma barra lateral de rolagem vertical com ele. Aqui estava meu código inicial, baseado no que Starx escreveu:

function fix_vertical_scroll(id) {
    $(window).scroll(function(){
        $(id).css({
            'top': $(this).scrollTop() //Use it later
        });
    });
}

É um pouco diferente da solução de Starx, porque acho que seu código foi projetado para permitir que um menu flutue horizontalmente em vez de verticalmente. Mas isso é apenas um aparte. O problema que tive com o código acima é que em muitos navegadores, ou dependendo da carga de recursos do computador, os movimentos do menu seriam instáveis, enquanto a solução css inicial era boa e suave. Atribuo isso aos navegadores que são mais lentos para disparar eventos javascript do que para implementar css.

Minha solução alternativa para esse problema de instabilidade é definir o quadro como fixo em vez de absoluto e, em seguida, cancelar os movimentos horizontais usando o método de starx.

function float_horizontal_scroll(id) {
    jQuery(window).scroll(function(){
        jQuery(id).css({
            'left': 0 - jQuery(this).scrollLeft()
        });
    });
}

#leftframe {
 position:fixed;
 width: 200;
}   

Você pode dizer que tudo o que estou fazendo é trocar a irregularidade da rolagem vertical por irregularidade da rolagem horizontal. Mas a questão é que 99% da rolagem é vertical, e é muito mais irritante quando está instável do que quando a rolagem horizontal é.

Aqui está meu post relacionado sobre este assunto, se ainda não exauri a paciência de todos: Corrigindo um menu em uma direção no jquery

jsarma
fonte
2

Eu tropecei neste post procurando uma maneira legal de manter meu cabeçalho / barra de navegação centralizado e responsivo às mudanças de tamanho.

//CSS
.nav-container {
  height: 60px;  /*The static height*/
  width: 100%;  /*Makes it responsive to resizing the browser*/
  position: fixed;  /*So that it will always be in the center*/
}

//jQuery
$(window).scroll(() => {
  if ($(document).scrollTop() < 60) {
    $('.nav-container').css('top', $(document).scrollTop() * -1)
  }
})

Conforme avançamos, a barra se move para cima fora da tela. Se você rolar para a esquerda / direita, ele permanecerá fixo.

Zack Biernat
fonte
Obrigado irmão. Isso funcionou. Embora tão simples !! Genius you
Ram
0

Sei que esse tópico é muito antigo, mas me ajudou a encontrar uma solução para meu projeto.

No meu caso, eu tinha um cabeçalho que queria nunca ter menos de 1000px de largura, o cabeçalho sempre no topo, com conteúdo que pudesse ser ilimitado certo.

header{position:fixed; min-width:1024px;}
<header data-min-width="1024"></header>

    $(window).on('scroll resize', function () {
        var header = $('header');
        if ($(this).width() < header.data('min-width')) {
            header.css('left', -$(this).scrollLeft());
        } else {
            header.css('left', '');
        }
    });

Isso também deve funcionar quando o navegador é menor que a largura mínima do cabeçalho

Zholen
fonte
0

Acabei de adicionar posição: absoluta e isso resolveu meu problema.

Marié
fonte
8
O posicionamento absoluto corrige os elementos relativos ao documento. O posicionamento fixo corrige-os em relação à janela. Se usar o absoluto resolveu o seu problema, então você não teve o mesmo problema que esta questão para começar.
Niall
0

Este é um tópico muito antigo, mas encontrei uma solução CSS pura para isso usando alguns aninhamentos criativos. Eu não era fã do método jQuery ...

Fiddle aqui: https://jsfiddle.net/4jeuv5jq/

<div id="wrapper">
    <div id="fixeditem">
        Haha, I am a header. Nah.. Nah na na na
    </div>
    <div id="contentwrapper">
        <div id="content">
            Lorem ipsum.....
        </div>
    </div>
</div>

#wrapper {
position: relative;
width: 100%;
overflow: scroll;
}

#fixeditem {
position: absolute;
}

#contentwrapper {
width: 100%;
overflow: scroll;
}

#content {
width: 1000px;
height: 2000px;
}
nuvens diferentes
fonte
6
Sua solução requer rolar a div do contêiner do conteúdo em vez da janela real, o que está longe de ser ideal - seu violino demonstra por quê. Seu conteúdo está sendo executado do lado direito da página, mas a barra de rolagem horizontal não está na tela. Esse é um grande problema de usabilidade.
Niall
0

Atualizado o script para verificar a posição inicial:

function float_horizontal_scroll(id) {
var el = jQuery(id);
var isLeft = el.css('left') !== 'auto';
var start =((isLeft ? el.css('left') : el.css('right')).replace("px", ""));
jQuery(window).scroll(function () {
    var leftScroll = jQuery(this).scrollLeft();
    if (isLeft)
        el.css({ 'left': (start + leftScroll) + 'px' });
    else
        el.css({ 'right': (start - leftScroll) + 'px' });
});

}

Emmanuel
fonte
0

No div pai, você pode adicionar

overflow-y: scroll; 
overflow-x: hidden;
Justyna
fonte
0
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

obrigado

Sumit
fonte
0

Sim, você realmente pode fazer isso usando CSS ...

body { width:100%; margin-right: 0; margin-left:0; padding-right:0; padding-left:0; }

Me diga se funciona

Tauras Burneika
fonte
-1

Uma solução muito fácil é:

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Solução fácil
fonte
você deve usar CSS3 position:fixedpara isso ao invés de ir para a solução js
Muhammad Omer Aslam
-3

Parece que você precisa usar position: fixed e, em seguida, definir a posição superior como uma porcentagem e a posição esquerda ou direita como uma unidade fixa.

OD Ntuk
fonte