Vị trí cố định bên trong cuộn div

Question

Tôi có một div với giả sử chiều cao là 400px. Nội dung dài hơn nhiều, do đó, div có thể cuộn (trục y). Ở phía bên phải của div, tôi cần một số nút để có vị trí cố định bên trong div đó.

Tôi làm như thế nào? jQuery, CSS, bất cứ điều gì - tôi không nhớ.

Tôi đã thử fixTo - nhưng dường như không hoạt động cho điều này - và một giải pháp CSS cho biết "sử dụng vị trí: cố định, nhưng không có trái/phải - chỉ lề". Nó hoạt động OK, nhưng nếu trang tự cuộn, các nút cũng cuộn - chúng không nên. Họ nên luôn cố định bên trong div vào mọi thời điểm.

Ví dụ mã:

<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

Bạn có thể thêm các đối tượng bên ngoài của div ở một vị trí cố định, tùy thuộc vào những gì là bên trong div của bạn? Nếu div của bạn phụ thuộc vào dữ liệu bên trong nó, một số javascript có thể tổng hợp nội dung trước khi thực hiện các hành động mong muốn phụ thuộc vào toàn bộ.

Answer 2

Tôi đã giải quyết nó bằng cách đặt các nút bên dưới và sau đó sử dụng lề trên: -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> 

Có vẻ như nó hoạt động. Nếu ai đó có giải pháp tốt hơn thì tất nhiên họ sẽ được chào đón. Cảm ơn tất cả các câu trả lời của bạn.

Answer 3

Bạn có thể sửa đổi đánh dấu HTML của mình và sử dụng phần tử trình bao với vị trí tương đối. Sau đó, bạn có thể postionning yếu tố liên quan đến cha mẹ này bằng cách sử dụng position: absolute;.

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>