Is it possible to change the scrolltop value dynamically based on a percentage of the user's screen size? I've been trying to achieve this using JS but haven't had any luck. Here is a link to a codepen that showcases the issue:
[link] (http://codepen.io/ericshio/pen/zBRbAY)
Here is the HTML:
<div class="filler"></div>
<a href="#introjump"><img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/></a>
This is the CSS used:
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 10000px;
}
And here is the JavaScript being applied:
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / 50);
});