Develop Reference

Is there a way to overlap a fixed div on scroll using jQuery and CSS?

I would like to create the following scrolling effect
While scrolling:
When the first div (.section-one) scrolls to the top of its container,
it becomes fixed. When the second div (.section-two)
scrolls to the top of the same container it covers the previous div and becomes fixed.
.section-two covers .section-one, section-three covers section-two and so on
Kind of like a card effect. I have an idea of how to do it.
But I'm not quite there yet.
I am also open to using plain JavaScript as well
I would like to mention. This is not Parallax scrolling where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
This is the foreground layer overlapping a fixed layer
.fixed {
left: 0;
position: fixed;
right: 0;
z-index: 0;
}
.section-one, section-two .section-three {
height: 100vh;
}
.scroll-contain {
overflow-y: hidden;
}
function sticktothetop() {
var element_top = $('.scroll-contain').scrollTop();
var top = $('#top-of-element').offset().top;
if (element_top > top) {
$('.section-one').addClass('fixed');
$('#top-of-element').height($('.section-one').outerHeight());
} else {
$('.section-one').removeClass('fixed');
$('.section-one').height(0);
}
}
$(function() {
$(window).scroll(sticktothetop);
sticktothetop();
});
<div class="scroll-contain">
<div id="top-of-element"></div>
<section class="section-one" style="background-color: yellow">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
<section class="section-two" style="background-color: pink">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
<section class="section-three" style="background-color: orange">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
</div>

if i'm not mistaken, you are looking for somewhat of a position: sticky effect.
try this, and see if it matches your request (no JS required):
.section-one, section-two .section-three {
position: sticky;
top: 0;
}
Would also recommend looking up more info about position: sticky, and how you could apply it to your needs.

I'm not 100% sure if you search for a "how I do it my own"-solution or
a "how do i do it" solution.
how do i do it
Is this what you're looking for?
http://scrollmagic.io/examples/advanced/parallax_sections.html
If so you could use Scrollmagic: http://scrollmagic.io/
how I do it my own
If you just want to learn how to do this your own, "Parallax" is what you can search for (Google or Stackoverflow, there are unlimited answers).

How to make full page/window width image inside limited width container and next to sidebar?

I need to make an image inside bootstrap's container. Image in div .full-image should be from the left to the right browser window. I know how to make it in single container, but in this example I have a menu left sidebar that is must to be. I need help with javascript/jquery script. Script should read the size of the browser window and keep the picture all the time on the left and right side of the window when the window reduces size(for mobiles, tables etc) and be full responsive.
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-3'>
<ul>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
<div class='col-9'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
<img src='http://blogs.worldbank.org/africacan/files/africacan/small_better_small.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula </p>
<div class='full-image'>
<img src='http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
</div>
</div>
</div>

To show your image based on your screen size don't bother too much with CSS coding. I would suggest you, use #mediaQuery of CSS. It would provide your image responsive support according to screen size.
-- Add below like code in your CSS and you will find your images responsive according to your screen size. You can enhance according to your requirements further. I feel this would be the best way to acquire responsiveness for your page.
#media only screen and (max-width: 600px) {
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
-- I am attaching a outcome of using above code in your CSS. How it will look like in responsive outcome you can take a look.
-- Feel free to ask further queries. Thanks!

Show/Hide Div which is also fixed

I have been back and forth, back and forth and I'm sure there is a simple answer but this is starting to frustrate me.
What I need is a div box that can toggle upon clicking a button. This is for a chat script that will always stay in the bottom hand corner. I want the button to always be visible, and then if you click the button, the chat script will open. You can then hopefully minimize it by clicking the button again. I have got so close by playing around multiple times, but I need 2 divs (as the first div will contain the button which is always visible, and the second div will appear upon click).
UPDATE: The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being "position:fixed;"
$(function() {
$('.button1').on('click', function() {
$('.initiallyHidden').toggle();
});
});
#calendar {
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position: fixed;
bottom: 0;
right: 0;
float: right;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
<button class="button1">Quick Chat</button>
</div>
<div class="initiallyHidden" style="display: none;">
<iframe src="'.$url.'" marginheight="0" marginwidth="0" scrolling="yes" allowtransparency="yes" frameborder="0">
</div>
The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being position:fixed;.
Please help me.

$("#button1").on("click", ()=>{
$("#initiallyHidden").toggle();
});
#chatbox {
position:fixed;
bottom:0;
right:0;
float:right;
}
#initiallyHidden {
bottom:10;
right:0;
float:right;
width:100px;
height:100px;
border-style: solid;
background-color:white;
}
#content {
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox">
<div id="initiallyHidden" style="display: none;">
Chat box
</div>
<button id="button1">Quick Chat</button>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>

Your CSS selectors are for IDs but your HTML elements have classes rather than IDs.

Inside your CSS you have #initiallyHidden instead of .initiallyHidden.
Same for calendar: #calendar instead of .calendar.
You have also an extra } inside your CSS
Remove the float:right property to the CSS too

$(window).on("load", function() {
$("#initiallyHidden").hide();
});
$( "#calendar" ).click(function() {
if($("#initiallyHidden").is(":visible")){
$("#initiallyHidden").hide();
}
else{
$("#initiallyHidden").show();
}
});
#calendar { position:fixed;
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position:fixed;
bottom:0;
right:0;
float:right;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "calendar" type="button">Show calender!</button>
<div id = "initiallyHidden">
Calendr
</div>

Editing Copied Content Slider to work

I copied a content slider and im trying to make it work. Can anyone help me to make it work? Thanks.
What i need is when you click the button next, next2, next3 it will display designated text as it shown below.
http://codepen.io/kevin11/pen/Byxvqa
HTML:
<section class="demo">
<button class="next">Next</button>
<button class="prev">Next2</button>
<button class="prev2">Next3</button>
<div class="container">
<div style="display: inline-block;" >
Sample Text
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text2
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text3
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
</div>
</section>
CSS:
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
left: 5px;
width:150px;
height:100px;
}
.prev {
left: 5px;
top:125px;
width:150px;
height:100px;
}
.prev2 {
left: 5px;
top:235px;
width:150px;
height:100px;
}

Here's a way to make a content slider with minimal JavaScript. The number of <a>s should be the same as the number of <div class="content">s.
$(function() {
$('.slider nav a').on('click', function() {
show_content($(this).index());
});
show_content(0);
function show_content(index) {
// Make the content visible
$('.slider .content.visible').removeClass('visible');
$('.slider .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$('.slider nav a.selected').removeClass('selected');
$('.slider nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
}
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
background: #596283;
font: 14px Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
border: none;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
}
.slider {
margin: 0px 20px;
position: relative;
background: #EFF1E4;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 100%;
}
.slider nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: #AD9897;
color: #6C5D5D;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
}
.slider nav a {
padding: 20px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.slider nav a:hover,
.slider nav a.selected {
background: #6C5D5D;
color: #AD9897;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.slider .content {
padding: 20px 0px;
position: absolute;
top: 0px;
left: 150px;
color: #6C5D5D;
width: 0px;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.slider .content.visible {
padding: 20px;
width: calc(100% - 150px);
overflow: scroll;
opacity: 1;
}
.slider .content p {
padding-bottom: 8px;
}
.slider .content p:last-of-type {
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<nav>
<a>Content #1</a>
<a>Content #2</a>
<a>Content #3</a>
</nav>
<div class="content">
<p>Content #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis. Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis, nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="content">
<p>Content #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="content">
<p>Content #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>

Fixed relative to another div

I have a div with text on the right and a div with a menu on the right. Both wrapped up with a div to center it all. Ho can I make the div right follow the screen when the user makes scroll with the text? I mean that the div right keeps "fixed" in the same place but the user could make move and scroll the text.(This is not a classic fixed position. I'm not sure if I should call this something like a fixed relative to another div?)
HTML:
<div id="wrapper">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis adipiscing dolor, eget rutrum lectus malesuada id. Phasellus vulputate, lorem et convallis vulputate, enim nulla scelerisque nunc, vel auctor orci tellus eget diam. Praesent scelerisque, mauris a molestie lobortis, lectus nisi dignissim massa, eget tempor ante sem in nisi. Proin fermentum euismod ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec orci arcu. Nullam molestie consequat porttitor. Pellentesque sit amet nisl odio. Ut vel mi a eros commodo vehicula sagittis ut mi. Donec eu ante velit, vel ullamcorper arcu. Etiam eros sapien, lobortis a porttitor quis, congue vel velit. Nam et dui auctor augue interdum interdum.<br /><br />
</div>
<div id="right"></div>
</div><!-- final de contingut -->
CSS:
body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
float:right;
width:200px;
height:500px;
right:0px;
border:solid thin #f00;
}
#text {
float:left;
width:400px;
padding:40px;
}
I have the example here: http://jsfiddle.net/u7xRX/1/

As per i understand may be you can use javascript for this. Write like this:
$(document).scroll(
function(){
var scrollOffset = $(window).scrollTop();
if(scrollOffset >= 100){
$('#right').css({position: 'fixed',top:'0', left:'650px'});
}
else{
$('#right').css({position: 'absolute',top:'100px', left:'650px'});
}
}
);
Check this http://jsfiddle.net/ZVrMF/1/

After a lot of time I could find a solution with just css. I think in fixed position if you don't give the right position it gets it from the parent div, in this case the wrapper. On the other side, I add a margin to position it on the right
http://jsfiddle.net/u7xRX/3/
body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
position: fixed;
top: 40px;
/* right:0px; important not give right position */
width:200px;
height:200px;
margin:0 0 0 500px; /* important to position it on the right */
background-color: red;
}
#text {
position: absolute;
left: 0px;
width:400px;
padding:40px;
}