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");
        }
    });
});

我知道我正在犯“思考错误”，但我找不到它。

有什么想法吗？

谢谢！

Answer 1

根据Nishit Maheta的建议（感谢!!）我最终使用了$（窗口）.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（）它会给你窗口的总高度。所以当你有总高度和元素顶部位置时，你可以扣除元素形状高度的顶部位置。所以它会给你距离底部的距离

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

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

2 个答案: