jquery - How can I change Javascript Value into percentage instead of pixels -
i want change scrolltop value 50px lets 1% of user's screen. how possibly go doing this. reading js value can percentage, not working me. here codepen made demonstrate effect:
[link] (http://codepen.io/ericshio/pen/zbrbay)
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>
css:
.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; }
js:
$(window).scroll(function() { $(".down-arrow").css("opacity", 1 - $(window).scrolltop() / 50); });
try this.
$(window).scroll(function() { $(".down-arrow").css("opacity", 1 - $(window).scrolltop() / $(document).height()*0.5); });
Comments
Post a Comment