jquery 当距底部的距离等于变量时设置动画

Question

滚动动画有点问题。

我第一次写 jQuery 时心里犯了一个错误：如果我在对象距页面顶部一定距离时为其设置动画，那将让我在不同设备上遇到大麻烦屏幕尺寸。

所以，我想做的是测量到视口底部的距离，而不是测量到顶部的距离。这将允许我在元素距底部 100px 时立即开始动画，无论屏幕尺寸如何。

但是由于一些愚蠢的原因我没有到达那里... =(

这是我现在的代码：

var doc = $(document);

$(".feature").each(function(){
    // VARIABLES
    var feature = $(this);
    var featureOffset = feature.offset().top-400;

    // ANIMATE FUNCTION
    doc.on("scroll", function(){
        if ( doc.scrollTop() > featureOffset && feature.hasClass("abouthidden") ) {
            feature.removeClass("abouthidden");
        }
        if ( doc.scrollTop() < featureOffset && feature.not("abouthidden") ) {
            feature.addClass("abouthidden");
        }
    });
});

我知道我正在制作 "thinking mistake"，但我找不到它。

有什么想法吗？

谢谢！

Answer 1

根据 Nishit Maheta 的建议（感谢！！）我最终使用了 $(window).height()

这是我想要的代码

var doc = $(document);

$(".feature").each(function(){
    // VARIABLES
    var feature = $(this);
    var featureOffset = feature.offset().top;
    var windowheight = $(window).height();

    // 200 is the distance from the bottom at which the animation actually starts 
    // could have used a variable
    var startAnimation = featureOffset - windowheight + 200; 

    // ANIMATE FUNCTION
    doc.on("scroll", function(){
        if ( doc.scrollTop() > startAnimation && feature.hasClass("abouthidden") ) {
            feature.removeClass("abouthidden");
        }
        if ( doc.scrollTop() < startAnimation && feature.not("abouthidden") ) {
            feature.addClass("abouthidden");
        }
    });
});

Answer 2

使用下面的代码。 $(window).height() 它会给你 window 的总高度。所以当你有总高度和元素顶部位置时，你可以扣除元素形式高度的顶部位置。所以它会给你离底部的距离

  var featureOffset = ($(window).height() - feature.offset().top);

jquery 当距底部的距离等于变量时设置动画

jquery animate when distance from bottom is equal to variable

jquery

animation

scroll

offset