基于设定起点滚动的不透明度

Question

我已经写了一个小的jQuery插件，当该部分到达窗口顶部时，开始降低该部分的不透明度。

现在，我想在这个起点上添加一个偏移量，也就是说，当元素离窗口顶部有一半高时，我要开始降低不透明度。

我在这里创造了一支笔：https://codepen.io/cosminn/pen/bywpOe

您还可以查看下面的代码：

(function ( $ ) {
    $.fn.hideScroll = function() {
        return this.each(function(){ //Required for inidivudal elements of the same type
            var elem = $(this),
                elementTop = elem.offset().top,
                elementHeight = elem.outerHeight(),
                opacity, scale;
            $(document).bind('scroll', function(){
                var areaHidden = $(window).scrollTop() - elementTop, // How much of the element is off-screen at the top
                    areaVisible = elementHeight - areaHidden,
                    limit = $(window).scrollTop() + (elementHeight / 2);
                if (elementTop <= limit) {
                    opacity = areaVisible / elementHeight; // Equivalent to how much percent of the element is visible
                }
                else opacity = 1; // Sometimes the opacity remains at 0.9XXX, so we turn it to 1 when element is in-view or off-screen at the bottom of window
                elem.css('opacity', opacity);
            });
        });
    };
}( jQuery ));

$(document).ready(function(){
  $('header').hideScroll();
  $('section').hideScroll();
});

我的问题是：

limit = $(window).scrollTop() + (elementHeight / 2);
if (elementTop <= limit)

这感觉就像在忽略$(window).scrollTop()之后在限制变量中添加的任何内容。

我并不是一个真正的开发人员，所以我可能错过了一件显而易见的事情。

Answer 1

想象一下，元素从更低的地方开始，是半高，这意味着：

var elementHeight = elem.outerHeight()/2;
var elementTop = elem.offset().top + elementHeight;

你的新笔。