I want to lock the scrollbar on window when the overlay is triggered which is working fine. But the problem is the body/ document jumps to the top when you scroll the page to the bottom/ middle and trigger the overlay.
I don't want the page to jump to the top. What I want to achieve is similar to Facebook's image overlay/ popup when you click on the image - it locks the background when you click on the image but it stays as it s when you exit the image popup. Is it possible?
CSS:
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: absolute;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
jQuery:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$("html").addClass('lock-scrollbar');
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$("html").removeClass('lock-scrollbar');
$('.overlay').hide();
return false;
});
});
HTML:
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
What have I done incorrectly?
My jsfiddle.
Well, I would lock the scroll in this way instead of using a fixed positioned lock-scrollbar:
$('html,body').css({'overflow-y': 'hidden'});
on the click of main and overflow-y back to auto:
$('html,body').css({'overflow-y': 'auto'});
when the overlay is hidden.
See demo below and updated fiddle here:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
$("#main").click(function() {
$('html,body').css({'overflow-y': 'hidden'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$('html,body').css({'overflow-y': 'auto'});
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
EDIT:
If you want to stick with the position: fixed solution - get / Set the value of scrollTop to reset the scroll.
Also added in $('html').css({'top':-scrollTop + 'px'}) while locking scroll - see demo below:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
var scrollTop = 0;
$("#main").click(function() {
scrollTop = $(window).scrollTop();
$("html").addClass('lock-scrollbar');
$('html').css({'top':-scrollTop + 'px'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$("html").removeClass('lock-scrollbar');
$(window).scrollTop(scrollTop);
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
Try CSS:
html, body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
color: #000;
}
Try JS:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$('body').css({
overflow: 'hidden',
height: '100%'
});
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$('body').css({
overflow: 'auto',
height: 'auto'
});
$('.overlay').hide();
return false;
});
});
Your modified jsfiddle: https://jsfiddle.net/y9e1kt3q/
New fiddle (the scroll remains visible): https://jsfiddle.net/y9e1kt3q/1/
Related
I have a save setting button for a profile edit web page. The page is long and I want the save setting button fixed at bottom of the page. On scrolling down it take her normal position. I can make it fixed at bottom on scrolling but I can't make it stick on the normal position when scrolling.
The design on small height mobile screen
And on scrolling down, I expect to stick before the footer
I add this css to the bottom container save-setting but this style make it fixed at the bottom all the time.
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
I think this question is similar to my question but I can't understand because the website example isn't working anymore. So anybody can help me in more details.
Edit
This is a example code for what I expect
.header {
height: 100px;
background-color: green;
}
.page-holder {
height: 600px;
background-color: red;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
button.primary-btn {
padding: 12px 20px;
border-radius: 10px;
color: #fcfcfc;
font-size: 14px;
line-height: 21px;
font-weight: 600;
background: linear-gradient(100.96deg, #15c077 8.41%, #2dc015 88.4%);
border: 0;
width: 100%;
}
.footer {
height: 300px;
background-color: orange;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
So I want the save-settings at the bottom page but on scrolling it stick before the footer on his normal DOM position.
You can use position: sticky to fix the footer to the bottom, you can then place content below it, to have it stick to it.
.wrapper {
height: 100vh;
position: relative;
}
.content {
background: green;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
.under-settings {
background: blue;
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
<div class="save-settings">
Save Settings
</div>
<div class="under-settings">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
</div>
Following your case in details, it turns out that your HTML structure needs some tweaking:
.page-holder {
height: 100vh;
}
.save-settings {
text-align: center;
border-top: 1px solid black;
padding: 20px;
position: sticky;
bottom: 0;
right: 0;
left: 0;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
</div>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
<div class="footer">
<h2>footer</h2>
</div>
Make the .save-settings element a direct child of the body element.
In this case, the position: sticky; will work without adding any additional position property.
I'm working on a website where I have a huge content, that I want to be scrollable. However, my code only works in Chrome and not in Firefox or Edge.
It seems to work when I set a fixed height for the #content like height: 200px;. But I want the content to always fill the rest of the screen height. The height of the header can change when I have a smaller screen, so CSS calc wouldn't work out I think.
I could use javascript to calculate the height every time the screen size changes, but I would prefer a more elegant way without js. (If there is one)
html, body {
height: 100%;
}
body {
margin: 0px;
}
#container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
#header {
background-color: blue;
min-height: 50px;
height: 50px;
}
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
}
#nav {
background-color: red;
width: 150px;
min-width: 150px;
}
#content {
font-size: 15px;
padding: 25px;
overflow-y: scroll;
}
<div id="container">
<div id="header"></div>
<div id="content-container">
<div id="nav"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui id mauris pharetra auctor eu sit amet ante. Nunc sodales
nisl quis purus lacinia fringilla. Mauris mollis sit amet metus et volutpat. Cras non ante lectus. Vestibulum ullamcorper
ligula at iaculis pellentesque. Fusce nec fringilla libero, sed maximus eros. Sed aliquam semper augue, ac vulputate
neque lobortis eget. Cras pulvinar, tortor non auctor lobortis, nulla dui semper augue, ut dictum massa magna vel urna.
Mauris fringilla iaculis mattis. Mauris at mauris sed mauris fringilla rhoncus. Mauris vestibulum arcu eu lectus pellentesque
facilisis. Nulla auctor nibh ac neque tincidunt rutrum. Vestibulum dapibus elit ex. Praesent id neque quis felis sodales
elementum. Quisque condimentum pellentesque finibus. Morbi ut dictum est, vel iaculis lectus. Vivamus sed nunc scelerisque,
mattis velit id, euismod odio. Suspendisse potenti. Suspendisse eros ante, eleifend ut dictum vitae, posuere sit amet
turpis. Suspendisse congue vestibulum nulla a tincidunt. Nulla facilisi. Nullam vel leo neque. Suspendisse potenti. Curabitur
vulputate vestibulum turpis, vitae rhoncus ante gravida sed. Sed vitae efficitur eros, consectetur ullamcorper nisl.
Nunc turpis massa, dapibus ac elit eget, rutrum tincidunt nisi. Proin nec metus id metus ornare sollicitudin. Integer
turpis purus, aliquam non est at, ultricies facilisis eros. Integer luctus nisl est, eget laoreet quam commodo ut. Proin
in enim volutpat, viverra nunc non, elementum est. Integer eu placerat nisl. Nullam posuere maximus metus, ut blandit
tellus. Vestibulum tristique luctus massa, eget mollis augue lobortis a. Curabitur fermentum id enim ac vestibulum. Praesent
commodo orci cursus lobortis sodales. Nam pellentesque vulputate enim, eu porttitor libero dignissim in. Fusce ligula
odio, facilisis sit amet mollis eget, tempor et erat. Quisque sit amet arcu mi. Duis sed tortor ex. Nunc elementum neque
ex, in luctus sem egestas sed. Etiam quis lorem tincidunt, commodo lacus non, cursus tellus. Maecenas a bibendum ex.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ut ullamcorper felis.</div>
</div>
</div>
Here's also a codepen
update like
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
overflow-y: hidden;
}
Here is the demo
This is a known issue in Firefox, see Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable
https://github.com/philipwalton/flexbugs/issues/108
update Like
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
height:100%
}
Could you please use max-height instead of height
I want to be able to scroll horizontally, but without the scroll bar shown.
I know, in Chrome it's:
::-webkit-scrollbar {
display: none;
}
But what about the Firefox and Internet Explorer? Somebody gives the following solution, but it seems does not work for horizontal scroll bar, it just works for vertical scroll bar.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Is there someone could help me?
For fire fox just use this rule:
overflow: -moz-scrollbars-none;
for IE:
-ms-overflow-style: none;
jsFiddle Demo (Test it on FF & IE)
Based on this tutorial:
Here the code:
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
Quisque vitae tincidunt purus. Vivamus feugiat bibendum
erat, nec interdum urna porta sed. Nunc lobortis neque
orci, ut suscipit nisl congue feugiat. Vivamus feugiat
tellus quis cursus sollicitudin. Curabitur dolor massa,
dictum ut ipsum in, porttitor pellentesque ante. Aenean
egestas cursus tempor. Maecenas semper tortor sit amet
egestas cursus. Mauris porttitor quis nisi ut tincidunt.
Curabitur adipiscing eleifend nibh. Praesent mauris leo,
consequat vitae orci eget, vestibulum bibendum nisi.
Aliquam tempus diam ut tortor cursus, eget sodales augue
adipiscing. Nulla at dignissim libero.
</div>
</div>
</div>
I've been searching for quite a while and tried several different approaches, but can't figure out a solution.
I would like for my footer to always be at the bottom of the page, however not necessarily always shown. So whenever enough posts are added, I want the page to keep growing, but the footer will always be on the bottom. You can see in my example in the snippet below how's it works.
However, I don't want the posts to be on the left side, or start from the top. Whenever I try to move the page-wrap div with absolute positioning, everything gets screwed up.
Originally inspired by this article: https://css-tricks.com/snippets/css/sticky-footer/
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -200px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
In order to center your content, you can give .page-wrap a width and auto margin to the left and the rigth:
.page-wrap {
...
width: 50%;
margin: 0 auto -200px auto;
}
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
width: 50%;
background: lightblue;
margin: 0 auto -200px auto;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
Have a look into it:
DEMO : https://jsfiddle.net/eLqzhaag/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
position: absolute;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
}
.container {
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
</style>
<script>
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
</script>
</head>
<!-- language: lang-css -->
<!-- language: lang-html -->
<body>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
width: 520px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
</div>
</div>
</div>
<div class="site-footer">
</div>
</body>
</html>
I've been trying to implement Enscroll Plug in into a Bootstrap page, but I haven't gotten Facebook Ticker Scrollbar that is shown in their demo's page to function right. I was wondering if anyone will be able to help me out and look at my code, and see what I am doing wrong in my syntax, and explain to me what I am doing wrong.
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
#scrollbox3 {
overflow: auto;
width: 400px;
height: 360px;
padding: 0 5px;
border: 1px solid #b7b7b7;
}
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9;
/* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies
sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor
cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
</div>
</div>
</div>
DEMO: http://jsfiddle.net/npfLjser/
The problem is because jquery is defined in the end. change order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
Show code snippet