Feste Position innerhalb Scrollen div

Question

Ich habe ein Div mit sagen wir eine Höhe auf 400px. Der Inhalt ist viel länger, so dass die div kann scrollen (Y-Achse). In der rechten Seite des Div, brauche ich einige Tasten, um eine feste Position in diesem div zu haben.

Wie würde ich das tun? jQuery, CSS, was auch immer - es macht mir nichts aus.

Ich habe versucht, FixTo - aber scheint nicht zu funktionieren - und eine CSS-Lösung, die sagt "verwenden Position: behoben, aber keine Links/rechts - nur Rand". Es funktioniert OK, aber wenn die Seite selbst scrollt, scrollt die Tasten auch - was sie nicht sollten. Sie sollten zu jeder Zeit innerhalb des div bleiben.

Beispielcode:

<div class="container" style="width: 960px; height: 400px; position: relative;"> 
    <div class="buttons needToBeFixed"></div> 
    <div class="aLotOfContent" style="width: 2000px;"></div> 
</div> 

Answer 1

Sie können außerhalb des div in einer festen Position das Objekt hinzufügen, je nachdem, was in Ihrem div ist? Wenn Ihr div von Daten innerhalb davon abhängt, kann einige Javascript den Inhalt aggregieren, bevor die gewünschten Aktionen abhängig von dem Ganzen ausgeführt werden.

Answer 2

Ich löste es, indem ich die Tasten darunter legte und dann margin-top: -400px;

<div style="position: relative"> 
    <div class="container" style="height: 400px;"></div> 
    <div class="buttons" style="margin-top: -400px; position: absolute; right: 0;"></div> 
</div> 

Es scheint zu funktionieren. Wenn jemand bessere Lösungen hat, sind sie natürlich willkommen. Danke für all deine Antworten.

Answer 3

Sie könnten Ihre HTML-Markup ändern und ein Wrapper-Element mit relativen Position verwenden. Dann könnten Sie das Element relativ zu diesem Elternelement positionieren, indem Sie position: absolute; verwenden.

body { 
 
    width: 1500px; 
 
    height: 1500px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
    width: 350px; 
 
    overflow: hidden; 
 
} 
 
#container { 
 
    height: 350px; 
 
    overflow-y: scroll; 
 
    border: solid #000 1px; 
 
} 
 
.sticky { 
 
    position: absolute; 
 
} 
 
.right { 
 
    right: 0; 
 
} 
 
.bottom { 
 
    bottom: 0; 
 
}

<div id="wrapper"> 
 
    <input type="button" value="Sticky button" class="sticky top" /> 
 
    <input type="button" value="Sticky button" class="sticky bottom left" /> 
 
    <input type="button" value="Sticky button" class="sticky right" /> 
 
    <input type="button" value="Sticky button" class="sticky bottom right" /> 
 
    <div id="container"> 
 
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     <br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    </div> 
 
</div>