根據起始點差異div高度

Question

我想讓一條垂直線從起始點（定義爲

CSS）到結束點（我尚未定義）。

這個想法是; 用戶滾動並且該線保持粘性和/或增長其高度直到終點。

但我不知道我應該運用哪個邏輯。

（不-工作）例如：https://jsfiddle.net/uzegqn7f/

這條線應該去，例如，第二圖像的頂部以下用戶的滾動位置。

<div class="vertical-line line-1"></div> 

<img src="https://dummyimage.com/900x300/000000/fff.jpg" alt="" class="line-1-start"> 

<div class="content"></div> 

<img src="https://dummyimage.com/900x300/000000/fff.jpg" alt="" class="line-1-end"> 

---

.content { 
    height:1000px; 
} 

img { 
    max-width:100%; 
    height:auto; 
} 

.vertical-line { 
    display: block; 
    position: absolute; 
    background: #ee403d; 
    width: 4px; 
    height: 10px; 
    z-index: 999; 
} 

.line-1 { 
    margin-left:10%; 
    margin-top:100px; 
} 

---

var distance = $('.line-1-end').offset().top - $('.line-1-start').offset().top; 

function line_animation(element,distance) { 
    $(window).scroll(function(){ 
     element.css("height", distance+"px"); 
    }); 
} 

$(document).on('load resize', function() { 
    var line1 = $(".line-1"); 
    line_animation(line1,distance); 
}); 

注：

• 的距離的元件之間是並不總是相同的，在響應性可能會發生變化。

Answer 1

試試這個（代碼中的註釋）：

var start = $('.line-1-start').offset().top, // get where line starts 
    end = $('.line-1-end').offset().top,  // get where line ends 
    line = $('#line'); 

drawLine($(window).scrollTop()); // draw initial line 

$(window).scroll(function(){ 
    drawLine($(this).scrollTop()); // draw line on scroll 
}); 

$(document).on('resize', function() {  // reset top and bottom and redraw line on window resize 
    start = $('.line-1-start').offset().top; 
    end = $('.line-1-end').offset().top; 
    drawLine($(window).scrollTop()); 
}); 

function drawLine(currentPosition) { 
    if (currentPosition >= start && currentPosition <= end) { 
    var distance = currentPosition - start; 
    line.css("height", distance+"px"); 
    } else { 
    line.css("height", 0); 
    } 
} 

Updated fiddle

Answer 2

我沒能完成它，但它幾乎沒有，如果有幫助。它會動態地計算出高度和開始/結束位置，你可能可以完成它，它不是完全正確地計算結束位置，而是稍微調整一下即可。檢出JSfiddle;

https://jsfiddle.net/x4jhLohs/2/

$(document).on('ready', function() { 

    $(window).scroll(function(){ 
    handleVerticalLine(); 
    }); 

    function handleVerticalLine() { 

    // Loop through and grab all our Vertical Line Containers, each one will have a Start and an End selector. 
    $('.vertical-line-container').each(function() { 

     // Grab our start and end elements. 
     var $startElement = $($(this).data('line-start-selector')); 
     var $endElement = $($(this).data('line-end-selector')); 
     var $verticalLine = $(this).find($('.vertical-line')); 

     if($startElement.length && $endElement.length && $verticalLine.length) { 


     var startElementTopOffsfet = $startElement.offset().top; 
     var endElementTopOffsfet = $endElement.offset().top + $endElement.height(); 
     var startElementVerticalLineBegin = startElementTopOffsfet; 
     var endElementVerticalLineBegin = endElementTopOffsfet; 

     $verticalLine.css('top', startElementTopOffsfet + $startElement.height()); 

     var verticalLinePercentage = startElementVerticalLineBegin/endElementVerticalLineBegin * 100; 

       verticalLinePercentage += $(window).scrollTop(); 

     $verticalLine.css('height', verticalLinePercentage) 

     } 

    }); 

    } 

});