I have bootstrap modal which contains scrollable div id=moreContent and modal is open when a button is clicked. but the problem if I close the div with the scroll bar and then I try to reopen the modal the scroll function is also called. what am I doing wrong here.
$(document).ready(function() {
$("#buttonId").click(function() {
$('#myModal').openModal();
});
$("#moreContent").scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) {
console.log("this should be called only if manually scrolled ??");
}
}
});
});
#myModal {
max-height: 700px;
height: 700px;
min-height: 700px;
max-width: 912px;
min-width: 912px;
width: 912px;
}
#moreContent {
overflow-y: auto;
max-height: 300px;
min-height: 300px;
}
<div id="myModal" class="modal confirm-dialog">
<div class="modal-content">
<div id="moreContent">
<div id="moreSupervisorContent"></div>
<div id="moreSubordinateContent" class="hidden"></div>
</div>
</div>
This is because your modal is changing the size of the document. When the document changes size, the scroll position changes, thus triggering a scroll event.
This is most likely due to the fact that your modal has a fixed height. Setting fixed sizes is typically a bad idea in web development since you can't predict how big someone's screen or browser will be.
To solve it, you should style your modal an absolute or fixed position, set it to 100% height and have it handle the overflow instead of #moreContent. The position will keep the document from growing and the modal will only show scrollbars if its content gets larger than it is.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
overflow: auto;
}
.modal__content {
height: 700px;
width: 60%;
margin: 30px auto;
padding: 30px;
background: #CCC;
}
<div class="modal">
<div class="modal__content">
<h3>This is the modal content</h3>
<p>This is some content inside the modal and it is fixed to 700px height</p>
</div>
</div>
<h1>This is the page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
Related
I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.
Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>
I have already tried with fixed and sticky position.Let's say we have two columns in our website, main column and sidebar.And our side column has contents longer than the height of the view port( like in reddit website as it contains footer and some ads).With fixed position , side bar doesn't scroll on page scroll.With sticky position , the side bar is initially sticky and scrolls only when the main column is ending. In reddit side bar , the right side bar scrolls along with page scroll. When the sidebar reaches the end of its content , it becomes sticky to the view port. How can i achieve that?
Here is the code for css
.sidenav { position: sticky; top: 20px; right: 0; left: 0; float: left; padding:10px; z-index:999998; }
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block; }
.main {
margin-left: 140px;
font-size: 28px;
padding: 0px 10px; }
code for html
<div class="sidenav">
About
Services
Clients
Contact
About
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<p>
</div>
You can store a specific scroll position value ( number of pixels) on the page at which you'd like to switch from the static scroll bar positioning over to fixing it to the bottom of the page. I used the start of the sidebar + the height of the sidebar - the window height + the padding I want below the sidebar. Then you just check the scroll position of the window when the document is scrolled and if it is past the value you stored, you add a class that switches its position to fixed. This snippet uses jQuery to accomplish the behavior in just a few lines.
const sidebar = $('.sidebar');
const fixedScrollPosition = sidebar.offset().top + sidebar.outerHeight() - $(window).innerHeight() + 10;
$(document).on('scroll', function() {
sidebar.toggleClass('fixed', $(window).scrollTop() > fixedScrollPosition);
});
body {
font-size: 0;
padding: 0;
}
p {
height: 200px;
background: red;
}
p:last-child {
margin: 0;
}
.page-content {
width: calc( 100% - 160px);
margin-right: 10px;
font-size: initial;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.sidebar {
width: 150px;
font-size: initial;
box-sizing: border-box;
vertical-align: top;
display: inline-block;
}
.sidebar.fixed {
position: fixed;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="sidebar">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
Edited:
HTML:
<div class="sidenav">
About
Services
Clients
Contact
<div class="sticky-tag">
sticky
sticky
</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<p>
</div>
CSS:
.sidenav {
margin-top: 20px;
float: left;
padding: 10px;
z-index: 999998;
width: 12%;
height: 100vh;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav .sticky-tag {
position: sticky;
top: 20px;
}
.main {
width: 88%;
margin-left: 12%;
font-size: 28px;
padding: 0px 15px;
}
I have a popup window, that is a div. It shouldn't go out of the screen, so I added an other div that is scrollable to facilitate the content if it's longer than the screen height. I can set the inner divs max-height in javascript like this (because I have content before it, so I don't know where it starts.):
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
This approach works on computers, but on smartphones in Chrome, the viewheight is more than what the user actually sees, because the url bar takes up space, so when that bar is shown, the end of the div is out of the screen. So how can I make the div end "15vh" from the actual bottom of the screen.
My code:
var container = document.getElementById("container");
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
body {
background-color: black;
}
#popup_content {
position: relative;
margin: auto;
background-color: red;
width: 80%;
max-width: 500px;
}
#container {
overflow: auto;
max-height: 50vh;
}
<div id="popup_content">
<p>some content</p>
<div id="container">
A lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, est vel congue eleifend, ante tortor ultricies leo, eu consectetur magna odio ac nibh. Nulla laoreet odio dui, ac aliquet purus porttitor et. Aliquam blandit vestibulum mauris, vel eleifend diam ultrices in. Vivamus eget eleifend dui. Cras aliquet libero et lorem venenatis ultricies. Vestibulum pulvinar erat eget velit porta, a gravida nunc scelerisque. Aliquam ut varius nibh. Aenean volutpat imperdiet nibh quis vestibulum. Donec eget magna varius, tempus augue ac, auctor ipsum. Vivamus quis egestas mauris. Vivamus dapibus risus hendrerit viverra ullamcorper. Pellentesque sodales elementum leo, sit amet ultricies elit rhoncus eu. Phasellus consectetur sit amet sem at mattis. Aliquam finibus risus ut ante pharetra, ut condimentum ligula convallis. Maecenas hendrerit, ligula at finibus pellentesque, justo ante varius metus, a luctus libero dui ut risus. Pellentesque dictum, risus ut fermentum tincidunt, purus massa dictum lectus, id aliquam neque risus at augue. Phasellus laoreet fermentum elementum. Donec sit amet aliquam neque. In consequat nec augue aliquam congue. Suspendisse purus neque, luctus vel placerat sed, pellentesque eget neque. Morbi tincidunt iaculis neque in imperdiet. Donec id tortor nunc. In lacinia rhoncus lectus, vitae feugiat felis egestas at.
</div>
</div>
I am using jQuery match height to make 3 boxes on my hope page have the same height. It works, but only upon page load. As I am using a CSS Responsive grid of 12 columns (Small, Medium and Large), when resizing the window the text squashes down to fit the width that I have given it, however, the newly adjusted boxes containing the text only maintain the height given to it by the jQuery.
Image 1: this is how it looks on page load, the boxes are the height of the highest box.
Image 2: this is how it looks after making the window smaller, see how the boxes are the same height but the text is still responsive.
How can I make the box resize with the text, whilst still having all boxes stay the same height? Thanks
$(document).ready(function(){
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
});
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
/*width: 97%;
float: none;*/
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
How about in your javascript code you have this instead:
function load() {
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
}
$(document).ready(load);
$(window).resize(load);
I have this situation:
.main-content {
background-color:blue;
width:100%;
height:3000px;
}
.fixed-menu {
height:50px;
background-color:pink;
position:fixed;
bottom:20px;
width:100%;
padding:20px;
}
<div class="container">
<div class="main-content">
</div>
<div class="fixed-menu">
Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
</div>
</div>
When scrolling down, the pink bar should not overlap the blue content. It should behave as if the blue content was an iframe positioned 60px from the bottom of the page, but without using an iframe, and only css.
Anyone knows if this is possible? https://jsfiddle.net/0e98os22/2/r
What you could do is put your content in an absolute div whose top, left and right are at 0, but with bottom:50px. Another div, your menu, also absolute, with bottom, left and right at 0, and with height: 50px. Then disable the page scrollbars using overflow:hidden.
html, body{
height: 100%;
}
body{
position: relative;
overflow: hidden;
}
.main-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
background: blue;
overflow: auto;
}
.fixed-menu {
background-color: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
<div class="main-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.
</div>
<div class="fixed-menu">
Fixed menu at the bottom.
</div>
Fiddle: https://jsfiddle.net/0e98os22/8/
Template:
<div class="container">
<div class="main-content">
<img src="http://i.imgur.com/RRUe0Mo.png" />
<img src="http://i.imgur.com/RRUe0Mo.png" />
<img src="http://i.imgur.com/RRUe0Mo.png" />
</div>
<div class="fixed-menu">
Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
</div>
</div>
CSS:
body, html, .container {
height: 100%;
overflow: hidden;
}
.container {
position: relative;
}
.main-content {
position: absolute;
bottom: 100px;
width: 100%;
top: 0;
overflow-y: auto;
}
.main-content img {
width: 100%;
}
.fixed-menu {
position:fixed;
height:50px;
background-color:pink;
bottom:0px;
width:100%;
padding:20px;
}