Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I want to change my app viewport while being in desktop view like this website has this functionality where you can click on "mobile" or "tabled" or "desktop" view: https://pro.chakra-ui.com/components/application/shells
Something like this
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".myDiv").classList.toggle("mobile");
});
div.mobile {
width: 8em;
height: 14em;
}
<button id="vp">Change</button>
<div class="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Odio ut enim blandit volutpat maecenas volutpat
blandit aliquam. Id semper risus in hendrerit gravida rutrum. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. Vestibulum sed arcu non odio euismod lacinia at quis risus. Facilisis volutpat est velit egestas dui id ornare arcu odio.
Dignissim suspendisse in est ante in nibh mauris cursus. Eget mi proin sed libero enim sed faucibus turpis. Risus nullam eget felis eget. Risus commodo viverra maecenas accumsan lacus. Faucibus nisl tincidunt eget nullam non nisi est. Eleifend mi
in nulla posuere sollicitudin aliquam. Id consectetur purus ut faucibus pulvinar elementum integer enim. Et leo duis ut diam quam nulla porttitor massa. Cras semper auctor neque vitae. Magna sit amet purus gravida quis blandit turpis. Egestas diam
in arcu cursus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Sed arcu non odio euismod
lacinia. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Mi bibendum neque egestas congue. Justo nec ultrices dui sapien eget mi proin sed libero. Senectus et netus et malesuada fames ac turpis egestas. Nisi scelerisque eu ultrices
vitae auctor eu augue ut. Vitae et leo duis ut diam quam nulla porttitor massa. Nunc faucibus a pellentesque sit amet porttitor. Velit euismod in pellentesque massa. Commodo quis imperdiet massa tincidunt nunc pulvinar. Dui accumsan sit amet nulla
facilisi morbi tempus. Eu volutpat odio facilisis mauris sit. At risus viverra adipiscing at in tellus integer. Pharetra sit amet aliquam id diam maecenas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Pharetra et ultrices
neque ornare aenean euismod elementum nisi quis. Ut porttitor leo a diam sollicitudin. Est ultricies integer quis auctor. Natoque penatibus et magnis dis parturient. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Elit
eget gravida cum sociis. Placerat duis ultricies lacus sed turpis tincidunt id. Sit amet mattis vulputate enim nulla. In hac habitasse platea dictumst. Vulputate dignissim suspendisse in est. Est ultricies integer quis auctor elit sed vulputate mi
sit. Ultricies tristique nulla aliquet enim tortor. Id neque aliquam vestibulum morbi blandit cursus. Volutpat blandit aliquam etiam erat. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Sed viverra tellus in hac habitasse. Elementum
curabitur vitae nunc sed velit dignissim sodales. Eu turpis egestas pretium aenean pharetra magna. Arcu odio ut sem nulla pharetra diam sit amet. Aliquam sem et tortor consequat id porta nibh venenatis. Dictum non consectetur a erat nam at lectus
urna duis. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Aliquet nec ullamcorper sit amet risus nullam eget felis. Posuere lorem ipsum dolor sit amet. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
tristique. Mauris a diam maecenas sed enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Odio ut enim blandit volutpat maecenas volutpat
blandit aliquam. Id semper risus in hendrerit gravida rutrum. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. Vestibulum sed arcu non odio euismod lacinia at quis risus. Facilisis volutpat est velit egestas dui id ornare arcu odio.
Dignissim suspendisse in est ante in nibh mauris cursus. Eget mi proin sed libero enim sed faucibus turpis. Risus nullam eget felis eget. Risus commodo viverra maecenas accumsan lacus. Faucibus nisl tincidunt eget nullam non nisi est. Eleifend mi
in nulla posuere sollicitudin aliquam. Id consectetur purus ut faucibus pulvinar elementum integer enim. Et leo duis ut diam quam nulla porttitor massa. Cras semper auctor neque vitae. Magna sit amet purus gravida quis blandit turpis. Egestas diam
in arcu cursus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Sed arcu non odio euismod
lacinia. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Mi bibendum neque egestas congue. Justo nec ultrices dui sapien eget mi proin sed libero. Senectus et netus et malesuada fames ac turpis egestas. Nisi scelerisque eu ultrices
vitae auctor eu augue ut. Vitae et leo duis ut diam quam nulla porttitor massa. Nunc faucibus a pellentesque sit amet porttitor. Velit euismod in pellentesque massa. Commodo quis imperdiet massa tincidunt nunc pulvinar. Dui accumsan sit amet nulla
facilisi morbi tempus. Eu volutpat odio facilisis mauris sit. At risus viverra adipiscing at in tellus integer. Pharetra sit amet aliquam id diam maecenas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Pharetra et ultrices
neque ornare aenean euismod elementum nisi quis. Ut porttitor leo a diam sollicitudin. Est ultricies integer quis auctor. Natoque penatibus et magnis dis parturient. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Elit
eget gravida cum sociis. Placerat duis ultricies lacus sed turpis tincidunt id. Sit amet mattis vulputate enim nulla. In hac habitasse platea dictumst. Vulputate dignissim suspendisse in est. Est ultricies integer quis auctor elit sed vulputate mi
sit. Ultricies tristique nulla aliquet enim tortor. Id neque aliquam vestibulum morbi blandit cursus. Volutpat blandit aliquam etiam erat. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Sed viverra tellus in hac habitasse. Elementum
curabitur vitae nunc sed velit dignissim sodales. Eu turpis egestas pretium aenean pharetra magna. Arcu odio ut sem nulla pharetra diam sit amet. Aliquam sem et tortor consequat id porta nibh venenatis. Dictum non consectetur a erat nam at lectus
urna duis. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Aliquet nec ullamcorper sit amet risus nullam eget felis. Posuere lorem ipsum dolor sit amet. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
tristique. Mauris a diam maecenas sed enim.
</p>
</div>
I figured out I have to put my website in an iframe
I want to display a progress bar while the user is scrolling, I want this progress bar to be based on a specific div, which means the progress bar should be 100% when the user scrolled to the end of the div.
Here is a fiddle: https://jsfiddle.net/tvmkf4ds/
Here is the code I use:
$(document).scroll(function () {
var scroll = $(this).scrollTop();
var $main = $('#scroll');
var offsetTop = $main.offset().top;
var offsetBottom = $main.offset().bottom;
var height = $main.height();
var percent = scroll - (offsetTop) / height * 100;
$("#progress-bar-value").css('width', percent);
});
The problem is the bar is not 100% filled when you scroll at the end of #scroll element, but only when you scroll until end of page.
I tried too:
var percent = scroll - (offsetTop - offsetBottom) / height * 100;
But I can't figure out the good calculation.
As far as I understood your problem this might be the solution:
If it is not displayed correctly here a quick fidddle for you: https://jsfiddle.net/zh76mybt/19/
$(document).scroll(function () {
const scroll = $(this).scrollTop();
const $main = $('#scroll');
const height = $main.height();
let percent = (scroll / height) * 1000;
$("#progress-bar-value").css('width', percent);
});
#progress-bar {
background: #eaeaea;
height: 12px;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
left: 0;
}
#progress-bar-value {
background: #0A2D82;
border-radius: 0 10px 10px 0;
height: 12px;
transition: all 0.2s;
width: 0;
}
#header {
height: 200px;
padding: 40px;
background: red;
color: #fff;
}
#footer {
height: 200px;
padding: 40px;
background: green;
color: #fff;
}
#scroll {
margin: 40px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
HEADER
<div id="progress-bar">
<div id="progress-bar-value"></div>
</div>
</div>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed mauris ac mi luctus eleifend porta ornare leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices arcu et mauris sodales elementum. Vestibulum ornare metus vitae lorem pellentesque, id dictum nulla venenatis. Sed porttitor efficitur euismod. Integer vel est nec felis aliquam pulvinar quis sit amet dolor. In maximus ex quis odio congue imperdiet. Suspendisse id augue sapien.
Donec vehicula erat eget quam viverra sodales. Proin ex mauris, fringilla sed augue vel, volutpat mattis elit. Proin est eros, tempus eu euismod eget, facilisis in turpis. Ut molestie mauris quam, ut blandit odio ullamcorper sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula libero id dignissim blandit. Pellentesque feugiat nisi dui, quis ultrices orci ultrices sed. Mauris et dictum ante. Integer pulvinar leo mi, ac mollis ligula dignissim quis. Morbi est dui, aliquet ac consequat semper, luctus at ipsum. Fusce sollicitudin neque non purus aliquet aliquet.
Fusce nec est lacus. Morbi ut mattis tortor. Maecenas dictum orci id nisl porttitor laoreet. Quisque quis euismod ligula, id aliquet orci. Ut rutrum arcu vel suscipit dapibus. Nullam elementum quis neque eget accumsan. Donec nec sodales lacus. Fusce volutpat sollicitudin nisi non viverra. Nunc vitae aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam vitae lorem at ante sollicitudin euismod. Fusce a lacus ac elit aliquet pretium. In libero lorem, rhoncus luctus arcu semper, vehicula porttitor nisl. Sed et lobortis est. Vivamus at tortor mauris. Ut vel leo eget massa lacinia bibendum. Cras elementum, nulla et varius aliquam, odio mi suscipit risus, a pellentesque lectus neque in urna. Suspendisse tempus, nisi sed finibus tempus, diam felis ultricies ante, eu tincidunt enim turpis ut purus. Sed luctus, mi eu dapibus ullamcorper, nulla diam posuere lorem, nec ornare libero justo vitae tellus. Duis purus ligula, tristique sed cursus sit amet, finibus a eros. Duis eget ipsum non enim congue vestibulum. Aliquam lobortis leo id nibh finibus, id pretium justo venenatis. Cras efficitur, ante vitae iaculis feugiat, purus sapien aliquet eros, quis feugiat orci nisi tempor lectus.
Curabitur nec cursus nisl, sed fringilla erat. In tincidunt justo eu vestibulum iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis pharetra ante, at commodo risus. Sed tincidunt augue eu mattis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae lectus in sapien condimentum bibendum. Curabitur at venenatis nisl.
Donec vulputate molestie orci. Sed accumsan ullamcorper suscipit. Vestibulum scelerisque tellus sed augue condimentum, ut dictum tortor finibus. Integer suscipit elit turpis, quis ultrices enim vulputate sit amet. Nam imperdiet, velit id ullamcorper bibendum, diam massa ultricies sapien, sit amet efficitur velit sem ut urna. Cras rhoncus, elit eget ultrices pellentesque, mauris est bibendum dui, a rhoncus enim quam sed neque. In ut pulvinar urna, vel efficitur erat.
Fusce sit amet dictum nulla. Proin consequat nisi non elit rhoncus gravida. In ac lacus erat. Pellentesque sit amet elit id elit fermentum ullamcorper a quis sapien. Ut semper lorem sapien, ut pretium risus iaculis id. Ut semper est sed nibh consequat vulputate. Pellentesque ornare sem non dolor lobortis tincidunt. Curabitur laoreet ex id suscipit porttitor. Integer ultrices ipsum elit, quis maximus ante luctus id. Ut eleifend, diam et dignissim scelerisque, nulla tortor volutpat magna, sit amet tristique massa lacus in nunc. Praesent diam sapien, porttitor at turpis vitae, vehicula vestibulum mauris.
Proin consectetur cursus quam, nec suscipit justo mattis sit amet. Pellentesque lobortis maximus nisi sit amet auctor. In hac habitasse platea dictumst. Suspendisse a facilisis dui. Nulla erat nisi, finibus nec tempor in, aliquet eget enim. Integer egestas maximus pharetra. Nullam hendrerit id diam nec consequat. Praesent eleifend nisl quis magna ornare, facilisis elementum lacus congue. In hac habitasse platea dictumst. Curabitur gravida ornare congue. Nullam et consequat neque. Morbi eu odio sagittis, hendrerit dui quis, euismod nulla
Fusce sit amet dictum nulla. Proin consequat nisi non elit rhoncus gravida. In ac lacus erat. Pellentesque sit amet elit id elit fermentum ullamcorper a quis sapien. Ut semper lorem sapien, ut pretium risus iaculis id. Ut semper est sed nibh consequat vulputate. Pellentesque ornare sem non dolor lobortis tincidunt. Curabitur laoreet ex id suscipit porttitor. Integer ultrices ipsum elit, quis maximus ante luctus id. Ut eleifend, diam et dignissim scelerisque, nulla tortor volutpat magna, sit amet tristique massa lacus in nunc. Praesent diam sapien, porttitor at turpis vitae, vehicula vestibulum mauris.
</div>
<div id="footer">
FOOTER
</div>
I think the percent calculation is not correct.
$(document).scroll(function () {
...
var percent = (scroll - offsetTop) / height * 100;
$("#progress-bar-value").css('width', `${percent}%`);
}
I am trying to make an element(social links) 'fixed' inside of a container div(blog post) that varies in height and doesn't continue past the container. So relative to the container div, not the window itself. If the Footer/Header are 500px in height, the social links span can overflow the blog container div. I would like it to snap to the top or bottom of the container div, only scrolling within.
example: https://jsfiddle.net/j8ayod1v/6/
<header></header>
<div class="blog-container">
<span class="social-links"></span>
</div>
<footer></footer>
You could try setting the position as sticky or absolute on the element you want to remain "fixed" within the grey container depending on the behavior you're looking for.
I added both below:
header {
background: red;
height: 100px;
}
footer {
background: red;
height: 300px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
top: 0;
}
.sticky {
position: -webkit-sticky;
position: sticky;
float: left;
}
.absolute {
position: absolute;
right: 0;
}
<header>
</header>
<article>
<span class="sticky">Fixed (sticky)</span>
<span class="absolute">Fixed (absolute)</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>
Is this what you need?
header {
background: red;
height: 500px;
}
footer {
background: red;
height: 500px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
position: sticky;
top:0;
}
<header>
</header>
<article>
<span>Fixed</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>
I've seen this on many websites where upon scroll one element becomes fixed while the elements next to it continue to scroll. I would like to understand how this works.
I created a pen for this: https://codepen.io/lisaschumann/pen/WNoJBbb where the left column is meant to be fixed when the right column starts to scroll. What am I missing here?
I used jQuery Code I had found on the issue, but ideally I would like to create this with JS.
CSS, jQuery and HTML:
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function () { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
* {
box-sizing: border-box;
}
/* Set additional styling options for the columns*/
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="margin: 0;;">
<div style="padding: 20px;">
<h1> Test</h1>
<div class="row">
<div class="column" style="height: 300px;">
<div class="fixme" style="background-color: red; border: 1px solid black; color: white; padding: 20px;">
<h2 style="margin:0 0 10px 0;">Headline</h2>
<span>Additional Info</span>
</div>
</div>
<div style="height: 2000px; background-color: blue; border: 1px solid black; color: white; padding: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</div>
</div>
Many thanks,
Lisa
Is this what you wanted or not? If you want to move header along with scroll, you can use position: sticky. Here you can find more: https://www.digitalocean.com/community/tutorials/css-position-sticky
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 20px;
}
.headerContainer {
width: 35%;
position: sticky;
position: -webkit-sticky;
top:10px;
left:0;
background-color: red;
border: 1px solid black;
color: white;
padding: 20px;
}
.row{
height: 2000px;
background-color: blue;
border: 1px solid black;
color: white;
padding: 20px;
}
h2{
margin:0 0 10px 0;
}
<body>
<body>
<h1> Test</h1>
<div class="row">
<div class="headerContainer">
<h2>Headline</h2>
<span>Additional Info</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</body>
So I'm working on a footer for a site that has a button which expands the footer to show/hide some more information (so regular footer on the bottom, expanded section above that). I'm just using a basic slideToggle now, but the problem is this scrolls the screen away from the bottom position (where it was when the toggle is clicked) so it gives the appearance of it sliding down rather than up. Is there a way to force the scroll position to stick to the bottom so the content is sliding in and everything is visible?
Thanks in advance everyone, this has been driving me nuts and I'm feeling kind of stuck!
Some more specifics -
HTML:
<div>
<p>Random Content</p>
<footer>
<div class="expand-me">
<p>Extra Info Here</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
CSS:
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
JS:
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle();
});
https://codepen.io/anon/pen/gvmzwB
i have done this by forcing window to scroll to bottom of the page.
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('#mydiv').height();
if($(this).is(':visible')){
$(document).scrollTop($(document).height()-$('.expand-me').height());
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
or like this one
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('.expand').height();
if($('.expand-me').is(':visible')){
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nula tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>