Have a Fixed Position Div That Needs to Scroll If Content Overflows

Have a fixed position div that needs to scroll if content overflows

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

You can use fixed to accomplish what you're trying to do.

.fixed-content {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}

This fork of your fiddle shows my fix:
http://jsfiddle.net/strider820/84AsW/1/

How to position sticky header on fixed position div with overflow-y: scroll

Dimensions and overflow added for .info-box-content. Height needs to be adjusted. Is set to a small value for demo purposes.

.info-box{    background-color: #0f0;    padding: 1em;    position: fixed;    z-index: 9999;    width: 22em;    height: 38em;  }
.info-box-content{ width: 20em; height: 10em; overflow-y: scroll;}
.info-box-header{ position: sticky;}
<div class="info-box">  <div class="info-box-header">  <a data-val="perfil" class="box-control">    <img class="close-btn" ... />  </a>
<h3>PERFIL</h3><br><br></div>
<div class="info-box-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>

When scrolling, I want the position: fixed content to not move if it hits this (class)

This can be done with pure CSS with no JS, .fixedBox element should be reordered for this, like so:

ul,li { 
margin: 0;
padding: 0;
list-style: none; }

#topArea {
min-height: 200vh;
background: #f4f4f4;
}

.fixedBox {
position: sticky;
width: 100%;
padding: 30px;
left: 0;
bottom: 0;
border: 0;
z-index: 88;
}

.fixedBox .fixedList {
color: coral;
font-size: 30px;
font-weight: 600;
}

.LimitPoint {
width: 100%;
height: 1px;
background: red;
}

#bottomArea {
position: relative;
margin: 120px 0 0;
padding: 0 5%;
}

#bottomArea ul div {
position: relative;
display: flex;
flex-direction: row;
}

#bottomArea ul li {
padding: 7px;
}

#bottomArea ul li img {
width: 100%;
height: auto;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


<div id="topArea"> </div>

<div class="fixedBox">
<ul class="fixedList">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>

<div class="LimitPoint"></div>


<div id="bottomArea">
<ul>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
</ul>
</div>

Scroll Div with a Position Fixed child

#wrapper {  background: red;  overflow-y: scroll;  height: 100px; border: solid 1px;}#header {  background: lightblue;  height: 200px; overflow-y: none;}#content {  background: green;}#popup {  background: yellow;  position: fixed;  top: 0;  opacity: 0.5;  pointer-events: none;}
<div id="wrapper">  <div id="header">Headerum textum</div>  <div id="content">    Contentum Textum    <div id="popup">      Popup textum, lorem ipsum dolor sit amet, consectetur adipiscing elit. ... Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.    </div>  </div></div>

Scroll a fixed position div to its bottom and then stop

I made some changes to the code. Check my answer for the differences. I hope it helps.

$(window).scroll(function() {  var distanceFromTop = $(document).scrollTop();  var h = $('#staticDiv').height()/2;  if (distanceFromTop >= h) {    $('#staticDiv').css({      "position": "fixed",      "top": "0px",      "right": "0px"    });  } else {    $('#staticDiv').css({      "position": 'absolute',      "top":"0px"    });  }});
#staticDiv {  height:200px;  right:0px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div><div class="col=lg-12" style="display:flex; position: relative;">  <div class="col-lg-3" style="position:fixed;left:0">some text</div>  <div class="col-lg-6" id="displayPost" style="float:left;left:0;right:0;text-align:center">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some    text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some    text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>  <div id="staticDiv" class="col-lg-3" style="">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some    text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div></div>

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

http://jsfiddle.net/ThnLk/1289

.stuck {
position: fixed;
top: 10px;
left: 10px;
bottom: 10px;
width: 180px;
overflow-y: scroll;
}

You can do a percentage height as well:

http://jsfiddle.net/ThnLk/1287/

.stuck {
max-height: 100%;
}

Make fixed position div scrollable without scrollbar and without scrolling the background content

This is ugly but it works

.mobile_menu 
{
//...
height: 100%;
overflow: scroll;
right: -25px;
}

https://jsfiddle.net/sk9dhgbj/



Related Topics



Leave a reply



Submit