Is there a way to use .scrollTop() and .css() to adjust the margins of an element so that it floats up only when the page is scrolled, but stops at a certain margin value? I want the element to float between specific values while scrolling.
The issue I am facing is with the units. When using vh in my CSS, neither percentages nor pixels seem to work. What alternative unit or method can be used to achieve this effect?
$(document).ready(function () {
var floater = $('#BLOCS_s1-img5');
$(window).scroll(function(e) {
if (
( $(document).scrollTop() > 50 && $(document).scrollTop() < 350 ) &&
( floater.css('margin-top') >= -35vh )
) {
floater.css('margin-top','-=2');
}
});
});
HTML:
<div class='BLOCS_projSample'>
<img id='BLOCS_s1-img4' src='images/Blocs2_logo.jpg'/>
<img id='BLOCS_s1-img5' src='images/Blocs_pp_singleMonth.jpg'/>
<img id='BLOCS_s1-img1' src='images/Blocs_pp_hpStack.jpg'/>
<img id='BLOCS_s1-img2' src='images/Blocs_pp_hp.jpg'/>
<img id='BLOCS_s1-img3' src='images/Blocs1_home.jpg'/>
</div>
CSS:
#BLOCS_s1-img5 {
width: 16vw;
position: relative;
margin: -17vh 0 0 30vw;
}