代码之家 › 专栏 › 技术社区 › LuisBento

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

offset scroll animation jquery

1

LuisBento · 技术社区 · 11 年前

我在滚动动画方面有点麻烦。

我第一次编写jQuery时,考虑到了一个错误:如果我在一个对象与页面顶部相距一定距离时设置动画,那么在屏幕大小不同的设备上,这会给我带来很大的麻烦。

所以,我想做的是,不是测量到顶部的距离,而是测量到视口底部的距离。这样,无论屏幕大小如何,只要元素从底部开始100像素,我就可以开始动画。

但出于一些愚蠢的原因,我没有去那里=(

这是我现在的代码:

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

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

有什么想法吗?

谢谢

2 回复 | 直到 11 年前

1

Nishit Maheta 11 年前

使用以下代码$(window).height()将给出窗口的总高度。所以,当你们有总高度和元素顶部位置时,你们可以从元素高度中减去顶部位置。所以它会给你距离底部的距离

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

2

1

LuisBento 11 年前

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