Menu
I have a menu bar who's class I want to change after a users scrolls to the next div, the div is 100vh tall. The function below works only with screens my size, anything smaller or bigger the animation will go to early or too late.
How do I make the units that this function uses vh? Thanks
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 600) { <---- change to vh units not px-----
$(".home").removeClass("open");
}
781
Definition and Usage The scrollY property returns the pixels a document has scrolled from the upper left corner of the window. The scrollY property is read-only.
window. scrollTo(0, document. body. scrollHeight);
You can check if window. scrollY (the number of pixels the window has scrolled vertically) is equal to 0 . If you want to check if the window has been scrolled to its leftermost, you can check if window. scrollX (the number of pixels the window has scrolled horizontally) is equal to 0 .
forward, then scroll offset is the amount the top of the sliver has been scrolled past the top of the viewport. This value is typically used to compute whether this sliver should still protrude into the viewport via SliverGeometry.
Use window.innerHeight and multiply it by fraction. For example, if you want 60 vh use (window.innerHeight)*0.6.
I'm not familliar with jQuery, but with vanillaJS it would be
if (window.pageYOffset > window.innerHeight)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
