css html javascript jquery
I make a full-page horizontal slider in javascript. It looks good but I found a bug. I have two div floated side by side. One div slid vertically while other div slid horizontally. What I want is sliding pace is the same for both the div. It is very difficult to make everyone understand just by describing the problem so I add a codepen link of my work. Please open the link, you automatically understand the problem. As I made this in jquery, I want some solution in either javascript or jquery not any external library.
<!doctype html>
<html>
<head>
<title>
Sticky Sidebar
</title>
<link href="https://www.acropolisinfotech.com/assets/css/web-development.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row normal-section bg-gray">
</div>
<div class="row sidebar-container normal-section flex">
<div class="col-md-6 col-sm-6 col-xs-6 text-container bg-white pd-0-0" >
<div class="text-box bg-green flex all-center pd-0-0">
<h3>One</h3>
</div>
<div class="text-box bg-gray flex all-center pd-0-0">
<h3>Two</h3>
</div>
<div class="text-box bg-green flex all-center pd-0-0">
<h3>Three</h3>
</div>
<div class="text-box bg-gray flex all-center pd-0-0">
<h3>Four</h3>
</div>
<div class="text-box bg-green flex all-center pd-0-0">
<h3>Five</h3>
</div>
<div class="text-box bg-gray flex all-center pd-0-0">
<h3>Six</h3>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 image-container bg-gradient pd-0-0 flex">
<div class="image-box-container pd-0-0 flex">
<div class="image-box pd-0-0">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="One" />
</div>
<div class="image-box pd-0-0">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="One" />
</div>
<div class="image-box pd-0-0">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" alt="One" />
</div>
<div class="image-box pd-0-0">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" alt="One" />
</div>
<div class="image-box pd-0-0 ">
<img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="One" />
</div>
<div class="image-box pd-0-0 ">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="One" />
</div>
</div>
</div>
</div>
<div class="row normal-section next-section bg-green" id="next-section">
</div>
<div class="row normal-section bg-white">
</div>
<div class="row normal-section footer-section bg-gray">
</div>
</div>
</body>
</html>
.container-fluid > div,.sidebar-container > div,.text-box,.image-box{
min-height: 100vh;
}
.image-container{
overflow: hidden;
}
.container-fluid > .footer-section{
position: relative;
z-index: 10;
}
.fixed-section{
position: fixed;
top: 0;
width: 50%;
height: 100vh;
right: 0;
z-index: 5;
overflow: hidden;
}
.mgt-100{
margin-top: 100vh;
}
#next-section{
position: relative;
z-index: 10;
}
.image-box{
height: 100vh;
overflow: hidden;
}
.image-box img{
width:50vw;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
}
.image-box-container{
position: absolute;
top: 0px;
left: 0px;
width: 300vw;
height: 100vh;
z-index: 3;
white-space: nowrap;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
$(document).ready(function()
{
var sidebar=$(".image-container");
var sectionPosition=sidebar.offset().top;
var next=$(".next-section");
var nextTop=$(next).offset().top;
var targetElement=document.querySelectorAll(".normal-section");
var classOf=false;
var sectionHeight=parseFloat(sidebar.css("height"));
var translatingValue=0;
var imageBoxWidth=$(".image-box:first-child").css("width");
var textBoxHeight= $(".text-box:first-child").css("height");
$(".image-container").css("width",textBoxHeight*6+"px");
function setFixedPosition(position,elementPosition,element,next)
{
if(position >= elementPosition && position < nextTop)
{
$(element).addClass("fixed-section");
//$(next).addClass("mgt-100");
}
else{
$(element).removeClass("fixed-section");
//$(next).removeClass("mgt-100");
}
}
$(window).on("scroll",function()
{
let top=$(this).scrollTop();
translatingValue=top-sectionPosition;
setFixedPosition(top,sectionPosition,sidebar,next);
let fixedStatus=$(".image-container").hasClass("fixed-section");
if(fixedStatus)
{
if(translatingValue < sectionHeight)
{
moveImageSlider(-(translatingValue));
}
else{
moveImageSlider(translatingValue);
}
}
else{
}
})
function moveImageSlider(val)
{
$(".image-box-container").css("transform","translateX("+val+"px"+")");
}
})
https://codepen.io/pranaysharma995/full/abzgoWx
