it-swarm.com.de

Minimum/Maximum absolute Position in CSS

Was ist der beste Ansatz, um die Position eines absolut positionierten Elements zu begrenzen, idealerweise in reinem CSS?

Ich weiß, dass Folgendes nicht möglich ist, aber ich schätze, was ich suche, würde ungefähr so ​​aussehen: 

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

Dies würde einem Element erlauben, sich zu einer Position zu bewegen, die nicht weniger als 100 Pixel von der Oberseite des enthaltenen positionierten Elements beträgt.

Ein Beispiel (und mein erster) Anwendungsfall hierfür ist ein Menü, das als Teil einer Seite einen Bildlauf durchführt, jedoch den Bildlauf stoppt, wenn es oben in einem Ansichtsfenster erscheint. (Sticky-Menüs?) Ein Beispiel davon ist auf dieser Seite zu sehen: http://spektrummedia.com/startups

Ich gehe davon aus, dass dies ohne Javascript nicht möglich ist, aber ich dachte, ich würde es dort veröffentlichen.

14
Lewis

position: klebrig

In den letzten Jahren gab es Diskussionen im W3C. Ein Vorschlag ist das Hinzufügen eines sticky-Werts für die position-Eigenschaft.

.content {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:      -o-sticky;
    position:         sticky;
    top: 10px;
}

Dies wird derzeit in Chrome 23.0.1247.0 und höher als experimentelles Feature unterstützt. Geben Sie zur Aktivierung about:flags als URL-Adresse ein und drücken Sie die Eingabetaste. Suchen Sie dann nach "experimentellen WebKit-Funktionen" und schalten Sie zwischen aktiviert und deaktiviert um.

Auf der html5rocks website gibt es eine funktionierende demo .

Streng genommen handelt es sich hierbei um eine Implementierung von klebrigen Inhalten und nicht um einen allgemeinen Zweck, um die minimale oder maximale Position eines Elements relativ zu einem anderen Element zu begrenzen. Klebriger Inhalt ist jedoch möglicherweise die einzige praktische Anwendung für die Art des Verhaltens, das Sie beschreiben.

10
Matt Coughlin

Da dies ohne die Verwendung von JavasScript nicht für alle gängigen Browser möglich ist, habe ich meine eigene Lösung mit jQuery entwickelt:

Weisen Sie position:relative Ihrem Sticky-Top-Menü zu. Wenn Sie durch Scrollen den oberen Rand des Browserfensters erreichen, wird die Position geändert in positon:fixed geändert.

Geben Sie auch Ihr sticky-top-menu top:0 an, um sicherzustellen, dass es oben im Browserfenster angezeigt wird.

Hier finden Sie ein funktionierendes JSFiddle-Beispiel .


HTML

<header>I'm the Header</header>
<div class="sticky-top-menu">
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </nav>
</div>
<div class="content">
  <p>Some content...</p>
</div>

jQuery

$(window).scroll(function () {
    var headerTop = $("header").offset().top + $("header").outerHeight();

    if ($(window).scrollTop() > headerTop) {
        //when the header reaches the top of the window change position to fixed
        $(".sticky-top-menu").css("position", "fixed");
    } else {
        //put position back to relative
        $(".sticky-top-menu").css("position", "relative");
    }
});

CSS

.sticky-top-menu {
    position:relative;
    top: 0px;
    width: 100%;
}
4
Philipp Hofmann

Mit einem Medienabfrageausdruck, der den Abstand zwischen Hauptteil 0X 0Y und Browserfenster 0X 0Y definiert, können Elemente nach dem Scrollen der Seite verklebt werden

Ansonsten wurde kein solcher Ausdruck vorgeschlagen und wird meines Wissens von keinem Browser unterstützt. Es wäre jedoch ein nützlicher Ausdruck, um die dynamische Konfiguration klebriger Elemente zuzulassen, z. B. klebende Menüleisten, nachdem die Seite ohne Verwendung am Kopf vorbeigescrollt wurde von JavaScript.

.this element {
  position: absolute;
  top: 200px;
}

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}
2
zyghi

Meines Wissens gibt es keine Möglichkeit, ein Element, das mit absoluter Positionierung positioniert wurde, ausschließlich mit CSS zu beschränken.

1
Tanner