Feste Position, aber relativ zum Container

Question

Ich versuche, eine div so dass es immer am oberen Rand des Bildschirms verbleibt, verwenden:

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

Allerdings ist die div befindet sich in einem zentrierten Container. Wenn ich position:fixed Es fixiert die div relativ zum Browser-Fenster, z. B. auf der rechten Seite des Browsers. Stattdessen sollte es relativ zum Container fixiert werden.

Ich weiß, dass position:absolute kann verwendet werden, um ein Element relativ zur div , aber wenn Sie auf der Seite nach unten scrollen, verschwindet das Element und bleibt nicht oben, wie bei position:fixed .

Gibt es einen Hack oder eine Umgehung, um dies zu erreichen?

Answer 1

Mein Projekt ist .NET ASP Core 2 MVC Angular 4 Vorlage mit Bootstrap 4. Hinzufügen von "sticky-top" in Haupt-App-Komponente html (d.h. app.component.html) in der ersten Zeile funktioniert, wie folgt:

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

Ist das die Konvention oder habe ich die Sache zu sehr vereinfacht?

Answer 2

Ich habe ein jsfiddle erstellt, um zu demonstrieren, wie das mit transform funktioniert.

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/

Answer 3

Wenn Sie position:fixed CSS-Regel und versuchen, die top / left / right / bottom positioniert es das Element relativ zum Fenster.

Eine Umgehung ist die Verwendung von margin Eigenschaften anstelle von top / left / right / bottom

Answer 4

Der Trick besteht darin, die Bildschirmbreite minus die Containerbreite zu nehmen und durch 2 zu dividieren:

//1400px is according to container max-width (left can be also right)
.fixed {
  position: fixed;
  right: calc((100vw - 1400px)/2);
}

Hinweis: Die Funktion css calc() wird zwar fast, aber nicht zu 100% unterstützt. Für die meisten Anwendungsfälle ist sie definitiv ausreichend unterstützt. Klicken Sie hier für weitere Einzelheiten

Snippet (mit einem 300px-Container, damit das Widget dieser Website hineinpasst):

.container {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.fixed {
  position: fixed;
  right: calc((100vw - 300px)/2);
}

@media screen and (max-width: 300px) {
  right: 0px;
}

<div style="height: 3000px">
    <div class="container">
        <button class="fixed">
            FIXED CONTENT
        </button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, eum? Animi quidem accusamus minima vel, dolorem suscipit quia accusantium minus harum modi commodi distinctio! Iste voluptatum earum quam voluptate culpa ad, ipsum dolorum recusandae quis atque eligendi necessitatibus magnam nisi dolores beatae qui? Perspiciatis natus cum nostrum in quod odio sapiente doloremque rerum quo dolore tenetur facere, quisquam atque accusamus fugiat eligendi, deleniti nisi minus recusandae distinctio dignissimos! Dicta quos ipsum qui pariatur at vel veritatis veniam quisquam minus modi et voluptas aliquam laborum, cumque in quo magnam sapiente. Expedita ut dolore laboriosam tempora reprehenderit vero eaque blanditiis, cumque voluptatibus, velit nemo, veniam tenetur quisquam numquam adipisci quae odio repellendus neque incidunt! Cum odio corporis soluta voluptate nesciunt, quasi nobis deleniti neque porro expedita fugiat placeat alias autem pariatur animi error, dicta veritatis atque perspiciatis inventore tempora dolor ad! Mollitia in dolorem ipsam eos porro magni perspiciatis possimus maiores, itaque facere ut. Eos culpa eum error quia incidunt repellendus quam possimus, asperiores earum ipsum molestias dicta sint fugit atque veniam dolorum illo? Officia harum sint incidunt totam, reiciendis illum eos maxime sequi neque repellat quis, expedita eum, corporis quaerat nemo qui soluta aspernatur animi. Sint ad rem numquam omnis sit.
    </div>
 </div>

Answer 5

Das ist möglich, wenn Sie JavaScript verwenden. In diesem Fall wird das jQuery-Plugin Klebe-Bausatz :