Trying to center and scroll text - javascript

I have the following jsfiddle (I sampled a little).
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
I'm trying to center the text and trying to scroll the text when it overflows. I'm not exactly sure whats wrong. I tried changing the position from absolute to fixed or relative but nothing worked. What am I doing wrong.

You are using in html overflow:hidden so change it overflow:auto; and your text is already centered.
Update css part
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto; /*Add this or remove it */
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>

Removed position: absolute; from .title and removed overflow: hidden; from html
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>

Of course so easy!
change
<div id="val">
to
<div id="val" align="center">
and move from you css html {}
overflow: hidden;
to you css body
body {
overflow: hidden;
}
and add a new object in you css with, val
#val {
overflow: y;
}
enjoy of this code.

Related

Make the CTA button stick to the bottom of the page when scrolling

I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>

Open accordion panelBody one or more

I am new to coding. I need to create a accordion, which I have created with html and used jQuery to expand collapse panel. When I try to open first panel, it opens and when I try to open the second panel the first panel closes, which I don't want to happen. I need a simple and easy jQuery method to achieve this.
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("fast");
//var height = $(this).clientHeight;
} else {
$('.panelHeading').removeClass('active');
$('.panelBody').slideUp('fast');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('fast');
}
this closes one panel when other is open. I want the open panel to stay open even if I open another.
$(document).ready(function() {
$('.question').click(function() {
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$('.question').removeClass('active');
$('.answer').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
}
});
$('.answer').hide();
$('.expand').click(function(event) {
$('.question').next().slideDown('normal'); {
$('.question').addClass('active');
}
});
$('.collapse').click(function(event) {
$('.question').next().slideUp('normal'); {
$('.question').removeClass('active');
}
});
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce
pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam
quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce
dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse
tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor
tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed
risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae,
dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor
viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis
nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque
adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed
nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus,
vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
You can do something as simple as:
$(document).ready(function() {
$('.question').click(function() {
$(this).toggleClass('active');//toggle on/off the active class
$(this).next().slideToggle('normal');// toggle up/down the slide
});
});
demo
You can just change below code on click of question;
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
Also find Working jsfiddle here.
$(document).ready(function() {
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
$('.answer').hide();
$('.expand').click(function(event)
{$('.question').next().slideDown('normal');
{$('.question').addClass('active');}
}
);
$('.collapse').click(function(event)
{$('.question').next().slideUp('normal');
{$('.question').removeClass('active');}
}
);
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top:30px;
font-family:verdana;
font-size:12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left:20px;
padding-top:18px;
cursor: pointer;
background-position : 4px -19px;
background-repeat : no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
background: #fff;
}
.question::before{
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae, dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus, vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
</body>
Hope this is what you are looking for.
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = function(root, jQuery) {
if (jQuery === undefined) {
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function($) {
var originalToggle = $.ui.accordion.prototype._toggle;
$.extend($.ui.accordion.prototype, {
multiple: false,
_toggle: function(data) {
if (this.options.multiple && data.newPanel.length) {
data.oldPanel = data.oldHeader = this.prevShow = $('');
if (this.options.collapsible && data.newPanel.is(':visible')) {
data.oldPanel = data.newPanel;
data.newPanel = $('');
}
}
originalToggle.apply(this, arguments);
}
});
}));
$( function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
collapsible: true,
multiple: true,
active: 1,
icons: icons
});
} );
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>

How to scroll the text up automagically when an overflow happens?

I have a simple div which fills the header's height but for test purposes, it has a fixed height of 400px.
It looks like this:
I use a type-it library so it writes the text itself. For now, the overflow property is set to hidden and it hides the text behind the bottom border.
What I want to achieve is to push the text upwards so it hides behind the top border, not the bottom one (scrolls automatically).
Is this even possible with built-in CSS things, or I have to write custom JS tools? Thanks for any tips!
Here's the current div's code:
.header-code {
position: absolute;
width:300px;
height:400px; /* 100% */
float: left;
padding: 50px 50px 50px 50px;
color: yellow;
border: 1px dotted blue;
overflow: hidden;
text-align: left;
}
I'm not familiar with type-it, but this may give you something to start with.
div {
width: 300px;
height: 200px;
overflow: hidden;
background-color: lightgray;
}
.scroll {
animation: scroll-it 10s linear forwards;
display: inline-block;
margin-top: 0;
}
#keyframes scroll-it {
from { margin-top: 0px; }
to { margin-top: -600px; }
}
<div><span class="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas
odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam
euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio,
ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat
ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec
consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra.
Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula.
</span></div>
Could be a good use case for the marquee tag! You can also use the scrollamount attribute to control the speed at which it will move!
You can read more about this wonderful feature of html4 here: https://www.quackit.com/html/codes/html_marquee_code.cfm
.container {
background-color: black;
width:300px;
height:400px; /* 100% */
overflow: hidden;
border: 1px dotted blue;
}
.header {
width: 94%;
height: 94%;
padding: 3%;
color: yellow;
overflow: hidden;
text-align: left;
}
<div class="container">
<marquee class="header" behaviour="scroll" direction="up">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas
odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam
euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio,
ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat
ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec
consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra.
Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula.
</marquee>
</div>

make wordpress menu sticky on scroll

Hello i am trying to make a wordpress menu sticky on scroll.
In practicality this is what i mean
http://dev.thegabrielmethod.com/ is the main menu which isnt sticky for now
https://www.thegabrielmethod.com/ this is how i want the menu to be on scroll, please check both links
This i what iv been able to do
http://dev.thegabrielmethod.com/gabriel/
using
.banner {
padding: 30px 50px;
}
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
background: #fff;
vertical-align: top;
-webkit-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}
.nav-bar-below.op-page-header {
margin-top : 100px;
position: fixed;
width: 100%;
background: #155b9b;
background: -moz-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#155b9b),color-stop(100%,#155b9b));
background: -webkit-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -o-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -ms-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: linear-gradient(top,#155b9b 0%,#155b9b 100%));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155b9b', endColorstr='#155b9b',GradientType=0 );
}
.op-page-header .navigation a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 19px;
text-shadow: 0 1px 1px rgba(249, 249, 249, 0), 0 1px 1px rgba(0,0,0,.5)!important;
text-rendering: optimizelegibility;
}
which does not give the kind of look on scroll as this
https://www.thegabrielmethod.com/
Can someone please help
Here's the working jsfiddle: https://jsfiddle.net/cyp8ngck/1/
Okay, so here's what i did.
I Created 2 different menus:
1. A normal menu that will be scrolled along with the page.
2. A sticky menu that will be displayed when the normal menu is scrolled outside the viewport and is no longer visible.
CSS for both menu types will is as follows:
/* common CSS styling for both menus to keep the code clean */
.menu, .sticky-menu {
display: block;
text-align: center;
font-size: 22px;
font-weight: bold;
background: #2e2e2e;
color: #ffffff;
padding: 15px 0px;
}
/* code for the sticky menu only */
.sticky-menu {
background: #cccccc;
color: #2e2e2e;
position: fixed;
z-index: 9999;
left:0;
right:0;
top:0;
transform: translateY(-100%);
transition: all .3s ease;
}
As you can see the sticky menu is pulled outside the viewport window and is kept hidden until the page is scrolled and the normal is hidden.
Now i just toggled this CSS class with the sticky menu:
(It pulls down and pulls up the Sticky Menu)
.pull-sticky-menu {
transform: translateY(0%);
transition: all .3s ease;
}
by detecting if the menu height in jQuery:
$(document).scroll(function() {
var scrollheight = $(this).scrollTop();
var menuheight = $(".menu").height();
if (scrollheight > menuheight) {
$('.sticky-menu').addClass("pull-sticky-menu");
} else {
$('.sticky-menu').removeClass("pull-sticky-menu");
}
});
Here's the code snippet:
$(document).scroll(function() {
var scrollheight = $(this).scrollTop();
var menuheight = $(".menu").height();
if (scrollheight > menuheight) {
$('.sticky-menu').addClass("pull-sticky-menu");
} else {
$('.sticky-menu').removeClass("pull-sticky-menu");
}
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
background: #ffffff;
}
.menu,
.sticky-menu {
display: block;
text-align: center;
font-size: 22px;
font-weight: bold;
background: #2e2e2e;
color: #ffffff;
padding: 15px 0px;
}
.sticky-menu {
background: #cccccc;
color: #2e2e2e;
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
transform: translateY(-100%);
transition: all .3s ease;
}
.pull-sticky-menu {
transform: translateY(0%);
transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="sticky-menu">
THIS IS STICKY MENU
</div>
<div class="menu">
THIS IS NORMAL MENU
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</div>
Let me know if this helps :)

Scroll one sticky div over another

I have a div that sticks once scrolled to top of the container - similar to this fiddle I found and have hacked (I appreciate the code is not great but is for the purposes of showing my issue).
I would like the next div to scroll over the previous div, and also stick once it hits the same position. At the minute, I can only get the div to continue scrolling behind, or 'jump', like what it is doing now.
I wish to achieve a scrolling set of divs that each fix at the top of the container, one after the other, on top of one another, rather than continuing to scroll beyond - this is the only option I can come up with so far.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky1').addClass('stick');
$('#sticky-anchor').height($('#sticky1').outerHeight());
} else {
$('#sticky1').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky,
#sticky1 {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
}
#sticky1.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 2;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>...</p>
<div id="sticky-anchor"></div>
<div id="sticky1">This should continue to scroll and stick on top
</div>
<p>...</p>
How about this? Should be at least a start.
https://jsfiddle.net/mqf7h5dz/
HTML:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top;
$('.sticky').each(function() {
//$(this).find(".scrolling").width( width * imgLength * 1.2 );
div_top = $(this).offset().top;
console.log("Top for this div: ", div_top);
if (window_top > div_top) {
$(this).removeClass('sticky');
$(this).addClass('sticked');
//$(this).height($('.sticky').outerHeight());
$(this).clone().appendTo($('#sticky_container'));
}
});
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
.sticky {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
.sticky-header {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky_container {
position: fixed;
top: 0;
}
.sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
background: red;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky_container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This should continue to scroll and stick on top
</div>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>

Categories

Resources