CSS: ¿posición fija en el eje x pero no y?

104

¿Hay alguna forma de fijar una posición solo en el eje x? Entonces, cuando un usuario se desplaza hacia arriba, ¿la etiqueta div se desplazará hacia arriba con ella, pero no de lado a lado?

Kylex
fuente
3
¿Está bien si le di una solución JS a este problema?
Starx
1
Necesita javascript para hacer esto.
LostLin
@Starx: no solo está bien, es obligatorio :-)
Pete Wilson
Recientemente respondí una pregunta similar que podría ser más similar a lo que estás buscando: stackoverflow.com/questions/8673560/…
Wex
Sé que es una pregunta bastante antigua, pero ¿sigues teniendo problemas con esta pregunta?
Starx

Respuestas:

58

Es una técnica simple que usa el guión también. También puede consultar una demostración aquí .

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 actualización : @ PierredeLESPINAY

Como se comentó, para que el script admita los cambios en el CSS sin tener que recodificarlos en el script. Puede utilizar lo siguiente.

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
fuente
@PeteWilson, Ok, revisa esta solución
Starx
2
¿Qué piensas sobre obtener el leftvalor al comienzo de la función como init_left = $('#header').position()['left']o algo similar?
Pierre de LESPINAY
@PierredeLESPINAY, Sí, muy buen punto. Eso lo haría lo suficientemente flexible para admitir los cambios.
Starx
2
Me encanta esta solución y la usé yo mismo. Sin embargo, un problema que tengo con él es que las actualizaciones son un poco entrecortadas cuando realiza un desplazamiento suave (por ejemplo, arrastrando la barra de desplazamiento). Parece que la actualización de JavaScript es más lenta que la actualización de CSS. ¿Alguna solución para esto?
jsarma
17

Este es un hilo antiguo pero CSS3 tiene una solución.

position: sticky;

Eche un vistazo a esta publicación de blog.

Demostración:

Animación pegajosa de posición CSS

Y esta documentación.

furia
fuente
1
Pasé años buscando una solución para esto, su respuesta se ajusta a mis necesidades de manera ideal.
Christopher Shaw
6
Esto es bueno para cosas verticales, pero no funciona para desplazamiento horizontal.
Cullub
10
Esto no responde la pregunta en absoluto.
Alohci
12

Si su bloque está originalmente posicionado como estático, es posible que desee probar esto

$(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>

ambientalhack
fuente
8

No, no es posible con CSS puro. Ese tipo de posicionamiento corrige el elemento en la ventana gráfica. Sugeriría simplemente fijar el elemento a uno de los lados de la ventana gráfica (es decir, arriba, abajo, izquierda o derecha) para que no interfiera con otro contenido.

Cabra descontento
fuente
7

Ahora que los dispositivos móviles tienen más del 70% del mercado de Internet, puede crear algo inteligente y receptivo para hacerlo.

Puede crear esto muy fácilmente con solo css, use un overflow-x: scroll para un contenedor y un overflow-y: scroll para otro contenedor. Puede colocar fácilmente los elementos del contenedor con ancho: 100vw y alto: 100vh.

Haga clic con el botón central en el ejemplo para probarlo. Funciona mejor en dispositivos móviles porque no ve las barras de desplazamiento.

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
fuente
No me gusta que la barra de desplazamiento inferior sea visible solo al desplazarse al pie ...
Fanky
En un navegador móvil, no aparecerá. En Chrome puedes ocultarlo con este CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. En Firefox, puede ocultarlo colocándolo fuera de un overflow:hiddencontenedor. Pero esa es otra pregunta que ha sido respondida antes, de eso estoy seguro.
EPurpl3
2

La solución de Starx fue de gran ayuda para mí. Pero tuve algunos problemas cuando intenté implementar una barra lateral de desplazamiento vertical con él. Aquí estaba mi código inicial, basado en lo que escribió Starx:

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

Es ligeramente diferente a la solución de Starx, porque creo que su código está diseñado para permitir que un menú flote horizontalmente en lugar de verticalmente. Pero eso es solo un aparte. El problema que tuve con el código anterior es que en muchos navegadores, o dependiendo de la carga de recursos de la computadora, los movimientos del menú serían entrecortados, mientras que la solución css inicial fue agradable y fluida. Atribuyo esto a que los navegadores son más lentos al activar eventos de JavaScript que al implementar css.

Mi solución alternativa a este problema de agitación es configurar el marco en fijo en lugar de absoluto, luego cancelar los movimientos horizontales usando el 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;
}   

Se podría decir que todo lo que estoy haciendo es cambiar la agitación del desplazamiento vertical por la agitación del desplazamiento horizontal. Pero el caso es que el 99% del desplazamiento es vertical, y es mucho más molesto cuando está entrecortado que cuando lo es el desplazamiento horizontal.

Aquí está mi publicación relacionada sobre este asunto, si aún no he agotado la paciencia de todos: Arreglando un menú en una dirección en jquery

jsarma
fuente
2

Me encontré con esta publicación buscando una buena manera de mantener mi encabezado / barra de navegación centrada y receptiva a los cambios de tamaño.

//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)
  }
})

A medida que nos desplazamos, la barra se mueve hacia arriba fuera de la pantalla. Si se desplaza hacia la izquierda / derecha, permanecerá fijo.

Zack Biernat
fuente
Gracias hermano. Esto funcionó. ¡¡Aunque tan simple !! Genius you
Ram
0

Me doy cuenta de que este hilo es muy antiguo, pero me ayudó a encontrar una solución para mi proyecto.

En mi caso, tenía un encabezado que quería que nunca tuviera menos de 1000px de ancho, encabezado siempre en la parte superior, con contenido que podía ir ilimitado a la derecha.

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', '');
        }
    });

Esto también debería funcionar cuando su navegador es menor que el ancho mínimo de sus encabezados

Zholen
fuente
0

Solo agregué posición: absoluta y eso resolvió mi problema.

Marié
fuente
8
El posicionamiento absoluto corrige elementos relacionados con el documento. El posicionamiento fijo los fija en relación con la ventana. Si el uso de Absoluto resolvió su problema, entonces no tuvo el mismo problema que esta pregunta para empezar.
Niall
0

Este es un hilo muy antiguo, pero he encontrado una solución CSS pura para esto usando un anidamiento creativo. No era un fanático del método jQuery en absoluto ...

Violín aquí: 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;
}
diferencia de nubes
fuente
6
Sin embargo, su solución requiere desplazarse por el div contenedor del contenido en lugar de la ventana real, lo que está lejos de ser ideal: su violín demuestra por qué. Su contenido se está ejecutando en el lado derecho de la página, pero la barra de desplazamiento horizontal no está en la pantalla. Ese es un gran problema de usabilidad.
Niall
0

Se actualizó el script para verificar la posición de inicio:

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
fuente
0

En div principal puede agregar

overflow-y: scroll; 
overflow-x: hidden;
Justyna
fuente
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
    });
});

Gracias

Sumit
fuente
0

Sí, en realidad solo puede hacer eso usando CSS ...

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

Dime si funciona

Tauras Burneika
fuente
-1

Una solución muy fácil es:

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Solución fácil
fuente
debe usar CSS3 position:fixedpara esto en lugar de optar por la solución js
Muhammad Omer Aslam
-3

Parece que necesita usar la posición: fija y luego establecer la posición superior en un porcentaje y la posición izquierda o derecha en una unidad fija.

OD Ntuk
fuente