Question

我有一个菜单栏，我想在用户滚动到下一个div后改变它的类，div是100vh高。下面的功能仅适用于我的大小的屏幕，任何小于或大的动画都会提前或过晚。

如何制作此功能使用的单位？感谢

  $(window).scroll(function() {    
var scroll = $(window).scrollTop();
if (scroll >= 600) {   <---- change to vh units not px-----
    $(".home").removeClass("open");
}

Answer 1

您可以在更改菜单类之前在希望下方div达到的高度创建一个不可见的固定元素。使用vh定位此固定元素，如果下部div已越过固定元素，则进行滚动功能测试。

CSS：

#fixed {
    position: fixed;
    top: 10vh;         /*or whatever height you want*/
}

JS：

$(window).scroll(function() {   

    var test = $('#fixed').offset().top;
    var lowerDivPosition = $('#lowerDiv').offset().top;

    if (lowerDivPosition >= test) { 
        $(".home").removeClass("open");
    };
});

Answer 2

对于遇到此事的人。我为此做的只是创建一个变量来获取视口的高度（它将以像素为单位返回一个值），然后在函数中使用该变量。

我的脚本会向下滚动1vh

var scrollBtn = $('#scrolldown');
var windowHeight = $(window).height(); // value in pixels
scrollBtn.click(function(){
  $('html, body').animate({
    scrollTop: $(window).scrollTop() + windowHeight
  },2000);
});

对于这个问题，解决方案将是这样的：

$(window).scroll(function() {    
  var windowHeight = $(window).height();
  var scroll = $(window).scrollTop();
  if (scroll >= windowHeight) {
    $(".home").removeClass("open");
  }
});

Answer 3

使用window.innerHeight并将其乘以分数。例如，如果您想60 vh，请使用(window.innerHeight)*0.6。

我对jQuery不熟悉，但是对于vanillaJS会很熟悉

if (window.pageYOffset > window.innerHeight)

Answer 4

100vh是该屏幕的实际视图高度。因此，当您使用不同尺寸的屏幕时，100vh将被计算为不同的大小。

如何使用vh单位代替.scrolltop函数的像素

4 个答案: