CODEWITHSUNDEEP
jquerycss
Christian Bundgaard
Christian Bundgaard

Reputation: 243

Fixed position inside scrolling div

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>

Upvotes: 12

Views: 9540

Answers (5)

Swrena
Swrena

Reputation: 330

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>

Upvotes: 6

Growyour GK
Growyour GK

Reputation: 463

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>

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

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>

Upvotes: 1

Christian Bundgaard
Christian Bundgaard

Reputation: 243

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.

Upvotes: 0

mh00h
mh00h

Reputation: 1856

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.

Upvotes: 0

Related Questions