Change Width of Element via scrollTop

Change Width of Element via scrollTop - javascript

I'm looking to achieve an affect like you can see here: http://www.nearme.co.il/Code/index.htm (if it's not working in Chrome try IE).
This is what I achieved so far: http://jsfiddle.net/yuvalsab/op9sg2L2/
HTML
<div class="trasition_wrapper">
<div class="trasition">1</div>
<div class="trasition">2</div>
<div class="trasition">3</div>
<div class="trasition">4</div>
<div class="trasition">5</div>
<div class="trasition">6</div>
<div class="trasition">7</div>
<div class="trasition">8</div>
<div class="trasition">9</div>
<div class="trasition">10</div>
<div class="trasition">11</div>
<div class="trasition">12</div>
<div class="trasition">13</div>
<div class="trasition">14</div>
<div class="trasition">15</div>
</div>
<div class="pagewrap">
<div class="some_text_1">Lorem ipsum dolor sit amet.</div>
<div class="some_text_2">Lorem ipsum dolor sit amet.</div>
<div class="some_text_3">Lorem ipsum dolor sit amet.</div>
<div class="some_text_4">Lorem ipsum dolor sit amet.</div>
<div class="some_text_5">Lorem ipsum dolor sit amet.</div>
<div class="some_text_6">Lorem ipsum dolor sit amet.</div>
<div class="some_text_7">Lorem ipsum dolor sit amet.</div>
<div class="some_text_8">Lorem ipsum dolor sit amet.</div>
<div class="some_text_9">Lorem ipsum dolor sit amet.</div>
<div class="some_text_10">Lorem ipsum dolor sit amet.</div>
<div class="some_text_11">Lorem ipsum dolor sit amet.</div>
<div class="some_text_12">Lorem ipsum dolor sit amet.</div>
<div class="some_text_13">Lorem ipsum dolor sit amet.</div>
<div class="some_text_14">Lorem ipsum dolor sit amet.</div>
</div>
CSS
div[class^="some_text"] {
padding:50px 0;
border-bottom:1px solid;
}
div.trasition_wrapper {
width:100%;
position: fixed;
left:100%;
background:red;
}
.trasition {
background: red;
position: absolute;
width:100%;
}
jQuery
function animate(element) {
var lastScrollTop = 0;
window_width = $(window).innerWidth();
$(window).scroll(function(event){
var scrolltop = $(this).scrollTop();
var stcalc = $(this).scrollTop()*3; // 3 -> Sets the speed of the animation
if(stcalc >= window_width) {
stcalc = window_width;
}
if(stcalc < window_width) {
element.animate({
left:-stcalc
}, 10);
}
else {
stcalc = window_width;
element.animate({
left:-stcalc
}, 10);
}
lastScrollTop = scrolltop;
});
}
jQuery(document).ready(function(){
jQuery('.trasition_wrapper .trasition').each(function() {
var element = jQuery(this);
pos=0;
position = pos+40;
animate(element);
element.css('top',position+'px');
});
});

Here's a decent solution. It could be cleaned up a bit, but it works.
http://jsfiddle.net/scheda/4tsokks7/
$(document).on('scroll', function(e) {
var bodyHeight = $(document).height()
var windowHeight = $(window).height();
var scrollTop = $(document).scrollTop();
var whereAmI = scrollTop + windowHeight
//we need to make sure we're calculating the percentage correctly
if (scrollTop < windowHeight) {
var heightPercentage = scrollTop / bodyHeight * 100;
} else {
var heightPercentage = whereAmI / bodyHeight * 100;
}
$('.scroll-progress').css('width', heightPercentage + '%');
$('.progress').text(Math.round(heightPercentage));
});
It's pretty simple. Basically it just calculates where you are in your scroll and then updates .scroll-progress with a new width and text.

Related

Scroll to top button visible only on desktop (no mobile)

I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.
However, I would like it to be visible only on desktop websites and not also on mobile.
I tried using media queries but they don't work since JavaScript has control over the visibility of the button.
What function can I integrate to manage everything with JS?
Here is the code I'm using.
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>

There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
scrollFunction();
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile
#media only screen and (max-width: 600px) {
#to-top-container {
display: none;
}
}

You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.
As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.
The #media query is set to max-width: 600px - adjust the max-width to fit your needs.
html {
scroll-behavior:smooth;
}
body {
position: relative;
}
.section {
height: 100vh;
background: #dedede;
margin-bottom: 20px;
font-size: 100px;
}
.scroll-container {
position: absolute;
top: 0;
right:0;
height: 100%;
}
.scroll-container:before {
content: '';
display: block;
height: 100vh;
pointer-events: none;
}
.scroll-container a {
position: sticky;
top: 88vh;
cursor: pointer;
font-size: 20px;
}
#media (max-width: 600px) {
.scroll-container a {
display: none;
}
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="scroll-container">
To Top
</div>

Rebuild this without js parent function. Change it to specyfic class

I want to rebuild this without .parent because i have trouble when i connect this in wordpress. I want in js add and remove specyfic classes without using parent. Change parent to specyfic class. How i can do that?
Can i save funcionality of this without .parent function in js?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$(this).hide().parent().addClass(newClass);
$('.tab').show();
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
$(this).parent().hide();
$(this).parent().prev('.tab').show();
var $target = $(this).parent();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this).parent().attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>

I had a similar issue recently where I was encountering some weird bugs while using .parent(). To combat this, I used data attributes.
More specifically, I set a data-target attribute on the closing button that contained a query of the element that I wanted to close. This query can then be easily passed to jQuery to find the exact element you want on the page. It's much more accurate and consistent compared to using relative elements.
var $contents = $('.tab-content');
$contents.hide();
var newClass = 'long';
$('.tab').click(function() {
var $target = $($(this).data('target'));
$target.addClass(newClass);
$target.find('.tab-content').show();
$target.find('.tab').hide();
});
$('.close').click(function() {
var $target = $($(this).data('target'));
$target.removeClass(newClass);
$target.find('.tab-content').hide();
$target.find('.tab').show();
});
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab" data-target=".post1">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close" data-target=".post1">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab" data-target=".post2">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close" data-target=".post2">close</div>
</div>
</div>

Is that what you're looking for?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$('.tab').show();
$(this).hide()[0].parentNode.classList.add(newClass);
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
var parent = $(this.parentNode);
parent
.hide()
.prev('.tab')
.show();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this.parentNode).attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>

How to Detect 40% in the Middle of a Div Using jQuery

Can you please let me know if it is possible to detect the 40% in the Middle of a Div Using jQuery for example in following example I need to enable the mousemove() only on 30% left side or 30% of the right side of the center.
$('#box-wrap').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log("X: " + x + " Y: " + y);
});
html, body{
width:100%;
height:100;
}
#box-wrap{
height:400px;
width:100%;
background:yellow;
}
<div id="box-wrap"></div>
Thanks

Add just two transparent divs as an overlay on the left and right and have the mouse move events only on those. I just added a red border to make them visible:
$('.sensor').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log("X: " + x + " Y: " + y);
});
html, body{
width:100%;
height:100;
}
#box-wrap{
height:400px;
width:100%;
background:yellow;
}
.sensor {
width:30%;
height: 100%;
border: 1px solid red;
background-color: transparent;
cursor: pointer;
}
.left {
position:absolute;
left: 0px;
top: 0px;
}
.right{
position:absolute;
right: 0px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box-wrap">
<div class="left sensor"></div>
<div class="right sensor"></div>
Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem ....
</div>

How about adding two child divs and calling .mousemove() on them instead?
<div id="box-wrap">
<div id="left_30"></div>
<div id="right_30"></div>
</div>
#left_30 {
position: absolute;
width: 30%;
height: 100%;
}
#right_30 {
position: absolute;
width: 30%;
height: 100%;
right: 0px;
}
Check out this working fiddle: https://jsfiddle.net/qeaxu9c9/2/

Try this:
$('#box-wrap').mousemove(function(e){
var t = $(this), w = t.height(), h = t.width(), os = t.offset();
var x = e.pageX - os.left, y = e.pageY - os.top;
console.log("X: " + x + " Y: " + y);
if(x >= w * 0.3 && x <= w * 0.7 && y >= h * 0.3 && y <= h * 0.7){
console.log('Inner 40%');
}
});

Fadein/Fadeout a text inside a div

I would like to know how could I make my div that contains text fade in from bottom to top when scrolling down the page? i will be grateful for your help. Here is my Code:
var $text = $('.textBlock');
$(window).on('scroll', function(event, element) {
$text.each(function(event, element) {
if ($(this).visible()) {
$(this).children('p').stop().fadeIn();
} else {
$(this).siblings('.textBlock p').stop().fadeOut();
}
});
});
.textBlock {
text-align: center;
width: 100%;
height: 118px;
float: left;
display: block;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

You need to use a timer function for this. Check this out:
$(function () {
$(".textBlock").hide();
$("#blockOne").show();
$(window).scroll(function () {
numTextBlocks = $(".textBlock").length;
$(".textBlock:visible").fadeOut(400, function () {
console.log(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")");
$(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")").fadeIn(400);
});
});
});
html, body {
height: 150%;
}
.textBlock {
position: fixed;
text-align: center;
width: 100%;
height: 118px;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>One Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Two Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Three Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

This is what I used:
$(document).on("mousewheel", function () {
$(".textBlock:not(:visible)").first().fadeIn("slow")
});
Here is the JSFiddle demo

Let me know if this code works with you.
Fiddle
$(window).on("load",function() {
function fade() {
$('.fade').each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
/* If the object is completely visible in the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});

Multiple Sticky Headers - CSS / JavaScript / AngularJS

I tried to find some solution for the following scenario:
Header height is all different
Mouse scroll down
Fixed headers
Does anyone know how to make multiple sticky headers like this?
(1) init
(2) scroll down (using mouse)
(3) scroll down (using mouse)

hmm...
DEMO
$(window).scroll(function() {
var $headers = $(".header");
var scrollTop = $(this).scrollTop();
if (scrollTop <= 0) {
// reset all
$headers.css({
position: "relative",
top: "0px"
});
} else {
$headers.each(function(index, $el) {
var $curHeader = $($headers).eq(index);
var curTop = $curHeader.offset().top;
var curHeight = $curHeader.height();
// scroll up
var isRelative = ($el.isFixed && scrollTop <= $el.exTop);
// scroll down
var isFixed = (curTop <= scrollTop);
var position = "";
var top = 0;
if (isRelative) {
// reset
positon = "relative";
top = 0;
$el.isFixed = false;
} else if (isFixed) {
position = "fixed";
if (0 < index) {
for (var i = 0; i < index; i++) {
top += $($headers).eq(i).height();
}
}
scrollTop += curHeight;
if (!$el.isFixed) {
$el.isFixed = true;
$el.exTop = curTop;
}
}
$($el).css({
position: position,
top: top + "px"
});
});
}
});
body {
height: 10000px;
}
div {
height: 200px;
background: gray;
width: 100%;
}
.header {
height: 50px;
background: green;
}
div.header:nth-child(7) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>content 0</div>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

Here is a simple example:
I'm calculating the height of the headers and setting the top property.
DEMO
$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
$headers.each(function (index, el) {
var height = 0;
if (index == 0) {
height = "0px";
} else {
for ( var x = index - 1; x >= 0; x--) {
height += $headers.eq(x).height();
}
}
height = height + "px";
$(el).css({
"position": "fixed",
"top": height
});
});
} else {
$headers.css({
position: "relative",
top: "0"
});
}
});
body {
height: 10000px;
}
div {
height: 100px;
background: green;
width: 100%;
}
.header {
height: 50px;
background: red;
}
.header:first-child {
height: 20px;
}
div.header:nth-child(5) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

With only css
Codepen-FollowMe Headers
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
height: 10rem;
}
.second {
height:50px;
background:blue;
height: 10rem;
}
.third {
height:50px;
background:green;
height: 10rem;
}
.stickyContainer {
.sticky {
position: sticky;
top: 0;
height: 2rem;
background: white;
}
}
<div class="first stickyContainer">
<div class="sticky"><h1>1</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="second stickyContainer">
<div class="sticky"><h1>2</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="third stickyContainer">
<div class="sticky"><h1>3</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Change Width of Element via scrollTop - javascript

Related

Scroll to top button visible only on desktop (no mobile)

Rebuild this without js parent function. Change it to specyfic class

How to Detect 40% in the Middle of a Div Using jQuery

Fadein/Fadeout a text inside a div

Multiple Sticky Headers - CSS / JavaScript / AngularJS

Categories

Resources