Elementposition im Ansichtsfenster als Prozentsatz abrufen

Question

Ich versuche, eine Elementposition (in Prozent) in Bezug auf das Ansichtsfenster zu erhalten.

Ich habe X Menge von Elementen auf der Seite und wenn man zur Ansicht kommt, möchte ich seine Position zum aktuellen Ansichtsfenster als Prozentsatz. Das Ansichtsfenster von oben nach unten ist also 0 - 100% und das hereinkommende Element beginnt bei 0% und bewegt sich auf 100%, wenn es gerade nicht mehr sichtbar ist.

Ich muss versuchen, diesen Wert zu erhalten.

das ist was ich bisher habe.

<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> 

Der scrollPercent ist die Berechnung Ich habe das Problem mit (glaube ich).

Vielen Dank im Voraus

Answer 1

Ich denke, das ist, was Sie nach:

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

Dieser Prozentsatz des auf der Oberseite des Elements, so dass, wenn der Boden des Elements Stossen Basis gibt leicht ist Aus dem oberen Bereich des Ansichtsfensters erhalten Sie ein negatives Prozent.

Oder wenn Sie wollen 0% erhalten, wenn die Boden des Element erster Spitzen von oben auf Ansichtsfenster und 100%, wenn die oben des Elements zuerst vom unteren Bildschirmrand verschwindet, verwenden Sie diese:

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