Como posso usar o jQuery para inserir uma propriedade vh em vez de px para navegar na rolagem? - jquery, css, viewport-units

Eu estou tentando criar uma navegação que desaparece depois de 100vh, mas eu só posso encontrar um exemplo que usa um px valor em vez de vh. Existe uma maneira de retornar um valor de altura da janela em jQuery para conseguir isso? Agradecemos antecipadamente <3

Em vez de 860px, eu preciso que seja equivalente a 100vh, ou equivalente à altura da janela de visualização da janela

      (function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 860) {
$("#navbar").fadeIn(200);
} else {
$("#navbar").fadeOut(200);
}
});
});
})(jQuery);

Respostas:

Não, não é possível. Mas vh é definido como a altura percentual da viewport. Então você pode obter a altura da janela de visualização:

$(window).height();

Ele retornará 860px (em seu exemplo) e, em seguida, dividirá por 100 e você terá quantos pixels representam 1vh de unidade.

var viewportHeight = $(window).height(); // == 100vh
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > viewportHeight) {
$("#navbar").fadeIn(200);
} else {
$("#navbar").fadeOut(200);
}
});
});
})(jQuery);