12

I have a div with let's say a height on 400px. The content is much longer, so the div can scroll (y-axis). In the right side of the div, I need some buttons to have a fixed position inside that div.

How would I do that? jQuery, CSS, whatever - I don't mind.

I tried fixTo - but doesn't seem to work for this - and a CSS solution that says "use position:fixed, but no left/right - just margin". It works OK, but if the page itself scrolles, the buttons scrolls too - which they shouldn't. They should stay fixed inside the div at all time.

Example code:

<div class="container" style="width: 960px; height: 400px; position: relative;">
    <div class="buttons needToBeFixed"></div>
    <div class="aLotOfContent" style="width: 2000px;"></div>
</div>
Christian Bundgaard
  • 243
  • 2
  • 13

5 Answers5

6

You need to have the button as position: absolute inside of the container.

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>
Swrena
  • 310
  • 3
  • 12
1

You could modify your HTML markup and use a wrapper element with position relative. Then you could postionning 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'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>
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
0

You can add the object outside of the div in a fixed position,depending on what is inside of your div? If your div depends on data inside of it, some javascript can aggregate the contents before performing desired actions dependent on the whole.

mh00h
  • 1,824
  • 3
  • 25
  • 45
  • I'm not quite sure, I understand, what you mean. Yes the div depends on data inside of it - and I can't figure out the JS myself, so I'm searching for a solution or maybe a link to a jQuery plugin or so. – Christian Bundgaard Oct 02 '15 at 14:23
  • I've added some HTML markup. Just imagine that the .container is the body, and position: fixed is used on the .buttons. That's what I want. – Christian Bundgaard Oct 02 '15 at 14:29
0

I solved it by placing the buttons underneath 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 work. If someone has better solutions they're of course welcome. Thanks for all your answers.

Christian Bundgaard
  • 243
  • 2
  • 13
0

You can fixed your issue 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>

Since needToBeFixed is out from your scrolling area. It will always stay in end of your div.

jQuery Solution As you mention you don't have an issue using jQuery below is 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>
Growyour GK
  • 463
  • 2
  • 6