Question

我正在尝试获取与视口相关的元素位置（以百分比值表示）。

我在页面上有X个元素，当有人看到它时，我希望它以当前视口的位置作为百分比。所以视口从上到下是0 - 100％，进入的元素将从0％开始，当它刚刚离开视图时移动到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)

这给出了基于元素顶部的百分比，因此如果元素的底部从视口顶部稍微伸出，则会得到负百分比。

或者，如果要在元素的底部首先从视口顶部突出时获得0％，并且当元素的顶部首先从视口消失时获得100％视口的底部，使用此：

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

以百分比形式获取视口中的元素位置

1 个答案: