I made the button "up" for the site, and I want it to appear smoothly when scrolling down the page (as in VK), but so that its transparency depended on the scroll distance. Such code turned out:

var h = window.outerHeight, t = window.innerHeight, r = 0; $(window).scroll(function() { r = $(window).scrollTop() - t; if (r > getDocumentHeight() - 200) { $('#ToTop').css({ opacity: 1 }); $('#ToTop').css({ display: 'block' }); } if (r > 0) { var op = r / 1000; $('#ToTop').css({ opacity: op }); $('#ToTop').css({ display: 'block' }); } else $('#ToTop').css({ display: 'none' }); });

But the problem is that the numbers of the transparency in the CSS are changing, but the button itself changes only when the page scroll stops. For example, the "Up" button in VC changes the transparency during the scrolling process. Tell me how this can be implemented.

  • and what doesn't work? for some reason everything works for me jsfiddle.net/Y3538 and even so jsfiddle.net/Y3538/1 . - zb '
  • Indeed)) The problem was not in js but in css, and more precisely in the property of the transition that was hung on the button, it actually did not make it possible to change the transparency right away, which in general is logical. As I never thought that this property could affect the scroll) Thanks anyway. - Artemiy Kotelevich

1 answer 1

 var wnd = $(window), opacityControl = $('div'); wnd.scroll(function(){ var top = wnd.scrollTop(), opacity = top > 500 ? 1 : top * 2 / 1000; opacityControl.css('opacity', opacity); }); 
 div{ opacity:0; height:1500px; background:#333; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> opacity block </div>

  • it would not be bad if you first knew the height of the page and then took away the height of the screen, then, the scrolled would be divided into a chilo higher, you would get the percentage ratio that you would put in opacity - AseTry