javascript - Reaching maximum content in a page using image scroll then should hide image using percentage of a window -

<script> $(window).scroll(function() {     if ($(window).scrolltop() > 600){         $("#bottom").addclass('show');     } else {         $("#bottom").removeclass('show');     };       }); </script> 

<button type="button" onclick="scrollwin()"><img src="images/aerodown.png"></button> 

function scrollwin() {     window.scrollby(0, 180); } 

this code. set 1 image scroll down when click it. problem when using it, in multiple devices image has been hide(but in browser image can view , click. not work mobile browsers). want hide image using percentage. means when reach 99% of page image should hide(am set opacity function). new jquery.

i not recommend define height static value. because add/remove page you'll need update value manually. fetch height , multiply target percentage.

jsfiddle: http://jsfiddle.net/ejdu0olf/1/

html:

<a href="javascript:;" class="scrollbt show">button</a> 

js:

var $win = $(window),     docheight = $(document).height(), // height of document     winheight = $win.height(), // height of window     targetperc = docheight * 0.9; // 0.9 = 0.9*100 = target percentage  // event $(document).on('scroll', togglebutton);   function togglebutton() {      // calculates current scroll position     var currentpos = $win.scrolltop() + $win.height();      // toggles "hidden" class if current position more target percentage     $(".scrollbt").toggleclass('hidden', currentpos >= targetperc); } 

css:

body {     height:1000px;     padding:0;     margin:0; }  .scrollbt {     position: fixed;     bottom:50px;     left:0;  }  .hidden {      display:none;    }