javascript - 获取视口(viewport)中元素位置的百分比

Question

我正在尝试获取相对于视口(viewport)的元素位置(以百分比值表示)。

我在页面上有 X 个元素，当一个元素进入查看时，我希望它相对于当前视口(viewport)的位置百分比。因此，视口(viewport)从上到下的范围是 0 - 100%，进入的元素将从 0% 开始，并在刚离开 View 时移动到 100%。

我需要尝试获取这个值。

这就是我到目前为止所拥有的。

<div class="animation-float">
    <img class="u-responsive-img animation-float-item" src="assets/img/Layer-82.png">
    <img class="u-responsive-img animation-float-item-shadow" src="assets/img/Layer-82-shadow.png">
</div>

<script>

    var $animation_elements = $('.animation-float'),
        $window = $(window);

    function check_if_in_view() {

    var window_height = $window.height(),
        window_top_position = $window.scrollTop(),
        window_bottom_position = (window_top_position + window_height);


    $.each($animation_elements, function() {

        var $element = $(this),
            $element_item = $element.find('.animation-float-item'),
            $element_item_shadow = $element.find('.animation-float-item-shadow'),
            element_height = $element.outerHeight(),
            element_top_position = $element.offset().top,
            element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {

            scrollPercent = Math.round(window_top_position/(element_top_position-window_height)*100);

            console.log(scrollPercent);

        } else {


        }
    });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

</script>

scrollPercent 是我遇到问题的计算(我认为)。

提前致谢

Answer 1

我认为这就是您所追求的:

scrollPercent = Math.round((element_top_position-window_top_position)*100/window_height)

这给出了基于元素顶部的百分比，因此如果元素的底部从视口(viewport)顶部稍微突出，您将得到负百分比。

或者，如果您希望在元素的底部首次从视口(viewport)顶部达到峰值时获得 0%，在元素的顶部首次从视口(viewport)中消失时获得 100%视口(viewport)底部，使用这个:

scrollPercent = Math.round(100*(element_bottom_position-window_top_position)/(window_height+element_height))