CSS: feste Position auf der x-Achse, aber nicht y?

104

Gibt es eine Möglichkeit, eine Position nur auf der x-Achse festzulegen? Wenn ein Benutzer einen Bildlauf durchführt, wird das div-Tag mit ihm nach oben gescrollt, jedoch nicht von Seite zu Seite?

Kylex
quelle
3
Ist es in Ordnung, wenn ich eine JS-Lösung für dieses Problem gegeben habe?
Starx
1
Dazu benötigen Sie Javascript.
LostLin
@ Starx - es ist nicht nur OK, es ist erforderlich :-)
Pete Wilson
Ich habe kürzlich eine ähnliche Frage beantwortet, die eher dem entspricht, wonach Sie suchen: stackoverflow.com/questions/8673560/…
Wex
Ich kenne die ziemlich alte Frage, aber haben Sie immer noch Probleme mit dieser Frage?
Starx

Antworten:

58

Es ist eine einfache Technik, die auch das Skript verwendet. Sie können hier auch eine Demo überprüfen .

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;
}

Update Credit: @ PierredeLESPINAY

Wie kommentiert, damit das Skript die Änderungen im CSS unterstützt, ohne sie im Skript neu codieren zu müssen. Sie können Folgendes verwenden.

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
quelle
@ PeteWilson, Ok überprüfen Sie diese Lösung
Starx
2
Was halten Sie davon, den leftWert zu Beginn der Funktion init_left = $('#header').position()['left']oder ähnliches zu erhalten?
Pierre de LESPINAY
@PierredeLESPINAY, ja, sehr guter Punkt. Das würde es flexibel genug machen, um die Änderungen zu unterstützen.
Starx
2
Ich liebe diese Lösung und habe sie einfach selbst verwendet. Ein Problem, das ich damit habe, ist, dass die Aktualisierungen beim reibungslosen Scrollen etwas abgehackt sind (z. B. durch Ziehen der Bildlaufleiste). Es scheint, dass die Aktualisierung von Javascript langsamer ist als die Aktualisierung von CSS. Irgendeine Lösung dafür?
Jsarma
17

Dies ist ein alter Thread, aber CSS3 hat eine Lösung.

position: sticky;

Schauen Sie sich diesen Blog-Beitrag an.

Demonstration:

CSS-Position klebrige Animation

Und diese Dokumentation.

frage
quelle
1
Ich habe lange Zeit damit verbracht, eine Lösung dafür zu finden. Ihre Antwort entsprach ideal meinen Bedürfnissen.
Christopher Shaw
6
Dies ist gut für vertikale Dinge, funktioniert aber nicht für horizontales Scrollen.
Cullub
10
Dies beantwortet die Frage überhaupt nicht.
Alohci
12

Wenn Ihr Block ursprünglich als statisch positioniert ist, können Sie dies versuchen

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

Nein, mit reinem CSS ist das nicht möglich. Diese Art der Positionierung fixiert das Element im Ansichtsfenster. Ich würde vorschlagen, das Element einfach an einer der Seiten des Ansichtsfensters (dh oben, unten, links oder rechts) zu befestigen, damit es andere Inhalte nicht beeinträchtigt.

DisgruntledGoat
quelle
7

Jetzt, da das Handy zu über 70% vom Internetmarkt entfernt ist, können Sie etwas Intelligentes und Reaktionsfähiges dafür schaffen.

Sie können dies sehr einfach mit nur CSS erstellen. Verwenden Sie einen Überlauf-x: Bildlauf für einen Container und einen Überlauf-y: Bildlauf für einen anderen Container. Sie können die Containerelemente einfach mit einer Breite von 100 VW und einer Höhe von 100 VH positionieren.

Klicken Sie mit der mittleren Maustaste auf das Beispiel, um es zu testen. Funktioniert am besten auf Mobilgeräten, da die Bildlaufleisten nicht angezeigt werden.

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
quelle
Ich mag es nicht, wenn die untere Bildlaufleiste nur beim Scrollen zum Fuß sichtbar ist ...
Fanky
In einem mobilen Browser wird es nicht angezeigt. In Chrome können Sie es mit diesem CSS ausblenden .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. In Firefox können Sie es ausblenden, indem Sie es außerhalb eines overflow:hiddenContainers platzieren. Aber das ist eine andere Frage, die schon einmal beantwortet wurde, da bin ich mir sicher.
EPurpl3
2

Die Lösung von Starx war für mich äußerst hilfreich. Ich hatte jedoch einige Probleme, als ich versuchte, eine Seitenleiste mit vertikalem Bildlauf zu implementieren. Hier war mein ursprünglicher Code, basierend auf dem, was Starx geschrieben hat:

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

Es unterscheidet sich geringfügig von Starx 'Lösung, da ich denke, dass sein Code so konzipiert ist, dass ein Menü horizontal statt vertikal schwebt. Aber das ist nur eine Seite. Das Problem, das ich mit dem obigen Code hatte, ist, dass in vielen Browsern oder abhängig von der Ressourcenlast des Computers die Menübewegungen abgehackt sind, während die anfängliche CSS-Lösung nett und reibungslos war. Ich schreibe dies darauf zurück, dass Browser beim Auslösen von Javascript-Ereignissen langsamer sind als beim Implementieren von CSS.

Meine alternative Lösung für dieses Choppiness-Problem besteht darin, den Rahmen auf fest statt absolut einzustellen und dann die horizontalen Bewegungen mit der Starx-Methode aufzuheben.

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

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

Man könnte sagen, ich tausche nur vertikales Scrollen gegen horizontales Scrollen. Aber die Sache ist, 99% des Bildlaufs sind vertikal und es ist viel ärgerlicher, wenn das abgehackt ist, als wenn das horizontale Bildlauf ist.

Hier ist mein verwandter Beitrag zu diesem Thema, wenn ich noch nicht die Geduld aller erschöpft habe: Ein Menü in eine Richtung in jquery korrigieren

jsarma
quelle
2

Ich bin über diesen Beitrag gestolpert und habe nach einer guten Möglichkeit gesucht, meine Kopfzeile / Navigationsleiste zentriert zu halten und auf Größenänderungen zu reagieren.

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

Während wir scrollen, bewegt sich die Leiste vom Bildschirm nach oben. Wenn Sie nach links / rechts scrollen, bleibt es fest.

Zack Biernat
quelle
Danke Bruder. Das hat funktioniert. So einfach aber !! Genius du
Ram
0

Mir ist klar, dass dieser Thread sehr alt ist, aber er hat mir geholfen, eine Lösung für mein Projekt zu finden.

In meinem Fall hatte ich einen Header, der niemals kleiner als 1000 Pixel sein wollte, den Header immer oben, mit Inhalten, die unbegrenzt richtig sein konnten.

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

Dies sollte auch funktionieren, wenn Ihr Browser kleiner als die minimale Breite Ihrer Header ist

Zholen
quelle
0

Ich habe gerade Position hinzugefügt: absolut und das hat mein Problem gelöst.

Marié
quelle
8
Durch die absolute Positionierung werden Elemente relativ zum Dokument fixiert. Durch die feste Positionierung werden sie relativ zum Fenster korrigiert. Wenn Sie mit absolute Ihr Problem gelöst haben, hatten Sie zunächst nicht das gleiche Problem wie diese Frage.
Niall
0

Dies ist ein sehr alter Thread, aber ich habe eine reine CSS-Lösung dafür gefunden, die eine kreative Verschachtelung verwendet. Ich war überhaupt kein Fan der jQuery-Methode ...

Geige hier: 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;
}
Differenzwolken
quelle
6
Ihre Lösung erfordert jedoch das Scrollen des Container-Divs des Inhalts anstelle des eigentlichen Fensters, was alles andere als ideal ist - Ihre Geige zeigt, warum. Ihr Inhalt wird auf der rechten Seite der Seite angezeigt, aber die horizontale Bildlaufleiste wird nicht angezeigt. Das ist ein großes Usability-Problem.
Niall
0

Das Skript wurde aktualisiert, um die Startposition zu überprüfen:

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

Auf übergeordnetem div können Sie hinzufügen

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

Vielen Dank

Sumit
quelle
0

Ja, das können Sie eigentlich nur mit CSS ...

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

Sag mir, ob es funktioniert

Tauras Burneika
quelle
-1

Sehr einfache Lösung ist:

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Einfache Lösung
quelle
Sie sollten CSS3 position:fixeddafür verwenden, anstatt sich für js Lösung zu entscheiden
Muhammad Omer Aslam
-3

Klingt so, als müssten Sie Position: fest verwenden und dann die obere Position auf einen Prozentsatz und die und entweder die linke oder die rechte Position auf eine feste Einheit setzen.

OD Ntuk
quelle