How to make Jquery scrollTop go to the right position? The Next CEO of Stack OverflowHighlight Menu Item when Scrolling Down to SectionWhy is position().top changing when I scroll the parent?Is there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
Why Were Madagascar and New Zealand Discovered So Late?
Why do remote companies require working in the US?
Science fiction novels about a solar system spanning civilisation where people change their bodies at will
Visit to the USA with ESTA approved before trip to Iran
Unreliable Magic - Is it worth it?
WOW air has ceased operation, can I get my tickets refunded?
Explicit solution of a Hamiltonian system
What do "high sea" and "carry" mean in this sentence?
How to write the block matrix in LaTex?
Why does GHC infer a monomorphic type here, even with MonomorphismRestriction disabled?
Is it my responsibility to learn a new technology in my own time my employer wants to implement?
I believe this to be a fraud - hired, then asked to cash check and send cash as Bitcoin
How long to clear the 'suck zone' of a turbofan after start is initiated?
Apart from "berlinern", do any other German dialects have a corresponding verb?
How do I get the green key off the shelf in the Dobby level of Lego Harry Potter 2?
Increase performance creating Mandelbrot set in python
Can a caster that cast Polymorph on themselves stop concentrating at any point even if their Int is low?
Opposite of a diet
Customer Requests (Sometimes) Drive Me Bonkers!
Where to find order of arguments for default functions
Whats the best way to handle refactoring a big file?
Why did we only see the N-1 starfighters in one film?
Why didn't Khan get resurrected in the Genesis Explosion?
Is it a good idea to use COLUMN AS (left([Another_Column],(4)) instead of LEFT in the select?
How to make Jquery scrollTop go to the right position?
The Next CEO of Stack OverflowHighlight Menu Item when Scrolling Down to SectionWhy is position().top changing when I scroll the parent?Is there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
3
Can anyone suggest why scrollTop is not scrolling to the top of the correct div?
I'm using it like this:
$("#generationbutton").click(function() {
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
Here is my complete code:
$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>View on CodePen
jquery scrolltop
edited Mar 21 at 5:00
showdev
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
add a comment |
3
Can anyone suggest why scrollTop is not scrolling to the top of the correct div?
I'm using it like this:
$("#generationbutton").click(function() {
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
Here is my complete code:
$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>View on CodePen
jquery scrolltop
edited Mar 21 at 5:00
showdev
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
add a comment |
3
3
3
Can anyone suggest why scrollTop is not scrolling to the top of the correct div?
I'm using it like this:
$("#generationbutton").click(function() {
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
Here is my complete code:
$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>View on CodePen
jquery scrolltop
edited Mar 21 at 5:00
showdev
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
Can anyone suggest why scrollTop is not scrolling to the top of the correct div?
I'm using it like this:
$("#generationbutton").click(function() {
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
Here is my complete code:
$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>View on CodePen
$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>$("#generationbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
console.log('This is where the div bottom leaves the window.')
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').animate(
scrollTop: $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vw;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
</div>
<div id="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>jquery scrolltop
jquery scrolltop
edited Mar 21 at 5:00
showdev
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
edited Mar 21 at 5:00
showdev
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
edited Mar 21 at 5:00
showdev
20.2k133352
edited Mar 21 at 5:00
showdev
20.2k133352
edited Mar 21 at 5:00
showdev
20.2k133352
20.2k133352
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
asked Mar 21 at 4:41
Sasha.BurgerSasha.Burger
709
709
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
3
jQuery's offset() gets the coordinates of the element relative to the document.
So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.
Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.
I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().
Here's a demonstration:
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>Related:
Why is position().top changing when I scroll the parent?
Edit
As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.
Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.
I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
I see that.wrapperwas set toheight:100vwinstead ofvh. I changed it in the demo above.
– showdev
Mar 21 at 16:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55273898%2fhow-to-make-jquery-scrolltop-go-to-the-right-position%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
jQuery's offset() gets the coordinates of the element relative to the document.
So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.
Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.
I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().
Here's a demonstration:
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>Related:
Why is position().top changing when I scroll the parent?
Edit
As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.
Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.
I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
I see that.wrapperwas set toheight:100vwinstead ofvh. I changed it in the demo above.
– showdev
Mar 21 at 16:07
add a comment |
3
jQuery's offset() gets the coordinates of the element relative to the document.
So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.
Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.
I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().
Here's a demonstration:
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>Related:
Why is position().top changing when I scroll the parent?
Edit
As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.
Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.
I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
I see that.wrapperwas set toheight:100vwinstead ofvh. I changed it in the demo above.
– showdev
Mar 21 at 16:07
add a comment |
3
3
3
jQuery's offset() gets the coordinates of the element relative to the document.
So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.
Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.
I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().
Here's a demonstration:
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>Related:
Why is position().top changing when I scroll the parent?
Edit
As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.
Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.
I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
jQuery's offset() gets the coordinates of the element relative to the document.
So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.
Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.
I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().
Here's a demonstration:
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>Related:
Why is position().top changing when I scroll the parent?
Edit
As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.
Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.
I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.
$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>$("#generationbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function()
if ($('.wrapperright').scrollTop() > (topofDiv + height))
$('#generationbutton').addClass('opacity');
else
$('#generationbutton').removeClass('opacity');
);
$("#lekhenabutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function()
if ($('#lekhenaporter').scrollTop() > (topofDiv + height))
$('#lekhenabutton').addClass('opacity');
else
$('#lekhenabutton').removeClass('opacity');
);
$("#bodysbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#glitterbutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);
$("#juicebutton").click(function()
$('.wrapperright').stop(true, false).animate(
scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
,
1500);
$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');
);html,
body
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
.wrapper
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
.wrapperleft
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow-y: hidden;
margin: 0;
.bio
margin: 20px;
.bio ul
margin-top: 20px;
padding: 0;
.bio h1
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
.bio ul li
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
.back
position: absolute;
bottom: 0;
margin-left: 20px;
.back h1
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
.wrapperright
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow: auto;
.wrapperright img
width: 50vw;
max-height: 100%;
display: block;
.opacity
opacity: 0.4;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
.display
display: block;
max-height: 100%;
max-width: 100%;
.wrapperright div
max-height: 100%;
max-width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<div id="generationbutton" class="opacity">
<li>01 Generation Anxiety</li>
</div>
<div id="lekhenabutton" class="opacity">
<li>02 Lekhenaporter.com</li>
</div>
<div id="bodysbutton" class="opacity">
<li>03 Body(s) Under Negotiation</li>
</div>
<div id="glitterbutton" class="opacity">
<li>04 Glitter Boy Cosmetics</li>
</div>
<div id="juicebutton" class="opacity">
<li>05 Juice WRLD Cover Art</li>
</div>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<div class="display">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
</div>
<div id="generationanxiety">
generationanxiety
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
</div>
<div id="lekhenaporter">
lekhenaporter
<img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
</div>
<div id="bodys">
bodys
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
<div id="glitter">
glitter
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
</div>
<div id="juice">
juice
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
</div>
</div>
</div>answered Mar 21 at 5:49
showdevshowdev
20.2k133352
edited Mar 21 at 16:28
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
answered Mar 21 at 5:49
showdevshowdev
20.2k133352
20.2k133352
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
I see that.wrapperwas set toheight:100vwinstead ofvh. I changed it in the demo above.
– showdev
Mar 21 at 16:07
add a comment |
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
I see that.wrapperwas set toheight:100vwinstead ofvh. I changed it in the demo above.
– showdev
Mar 21 at 16:07
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
Thank you so much this works perfectly! One final question; do you know why the last image inside .wrapperright is being cropped?
– Sasha.Burger
Mar 21 at 7:54
1
1
I see that
.wrapper was set to height:100vw instead of vh. I changed it in the demo above.– showdev
Mar 21 at 16:07
I see that
.wrapper was set to height:100vw instead of vh. I changed it in the demo above.– showdev
Mar 21 at 16:07
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55273898%2fhow-to-make-jquery-scrolltop-go-to-the-right-position%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
