Fixed position inside scroll div

Question

I have a div with let say height at 400px. The content is much longer, so the div can scroll (y axis). On the right side of the div, I need some buttons to have a fixed position inside this div.

How can I do it? jQuery, CSS, whatever - I don't mind.

I tried fixTo - but it doesn't seem to work for this - and a CSS solution that says: "Use position: fixed, but not left / right - just margin." It works fine, but if the page itself scrolls, the buttons also scroll - which they shouldn't. They must remain stationary inside the div at all times.

Code example:

<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

You need the button to be located absolutely inside the container.

here is what you need:

JsFiddle: JsFiddle

Snippest:

 .container { width: 250px; outline: 1px solid blue; width: 300px; height: 150px; position: relative; } .container .aLotOfContent { width: 300px; height: 150px; overflow: auto; background: #e3ecfc; } .container .fixed{ width: 60px; height: 40px; background-color: #e52727; color: white; position: absolute; right: 40px; bottom: 20px; } html, body{ height: 400px; } 

 <div class="container"> <button class="fixed"> im fixed! </button> <div class="aLotOfContent"> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br> </div> </div> 

Answer 2

Can you add an object outside the div in a fixed position, depending on what is inside your div? If your div depends on the data inside it, some javascript may aggregate the content before performing the desired integer-dependent actions.

Answer 3

I solved this by placing the buttons at the bottom and then using 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> 

It seems to have worked. If anyone has the best solutions, they are of course welcome. Thanks for all your answers.

Answer 4

You can change your HTML markup and use a shell element with a relative position. You can then position the element relative to this parent using 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 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 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> 

Answer 5

You can solve this problem in two ways.

Pure HTML / CSS

 <div class="container relparentwrap" style="width: 960px; height: 400px;"> <div style="height:100%; width:100%; position: relative; overflow:auto;"> <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;"> <div style="height:400px; background:green"></div> <div style="height:500px; background:yellow"></div> <div style="height:500px; background:purple"></div> </div> </div> <div class="buttons needToBeFixed" style="border:solid 1px #fff;margin-top: -20px;position: relative;z-index: 1;">Helllo</div> </div> 

Because needToBeFixed is out of the scroll area. This will always remain at the end of your div.

JQuery Solution As you mentioned, you have no problem using jQuery below - your code snippet. JSFiddle Link

 <!DOCTYPE html> <html> <head> <title>Fixed position inside scrolling div</title> </head> <body style="margin:0;"> <div class="container relparentwrap" style="width: 960px; height: 400px; position: relative; overflow:auto;"> <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;"> <div style="height:400px; background:green"></div> <div style="height:500px; background:yellow"></div> <div style="height:500px; background:purple"></div> </div> <div class="buttons needToBeFixed" style="position:absolute; left:0; right:0; border:solid 1px #fff;">Helllo</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> $(function() { var p = $(".relparentwrap").offset(); var tPos = (p.top + $(".relparentwrap").outerHeight()) - $(".needToBeFixed").outerHeight(); vPos=tPos; $(".needToBeFixed").css("top",tPos); $(".relparentwrap").scroll(function() { tPos = vPos + $(".relparentwrap").scrollTop(); console.log(tPos); $(".needToBeFixed").css("top",tPos); }); }); </script> </body> </html>