創建固定位置的文字作爲頁面向下滾動，然後停止某一位置

Question

我試圖創建效果基本上完全一樣，這個頁面上使用的一個：http://www.ohmy.io/work/landrover-live/

當你向下滾動頁面的文本移動隨着滾動，然後停在某個位置。

任何人都可以指導如何做到這一點？

感謝

Answer 1

我認爲你正在尋找：

.some-class{ 
    position: sticky; 
    top: //now used to set position to stick to 
    left: //or you could sticky left, etc. 
} 

CSS Position

Answer 2

你可以做的是類之間切換，當你點擊頁面的底部，或位置的一些元素...

這是一個例子，它可以做得更好我敢肯定

HTML：

$(window).scroll(function() { 
 
    console.log($(window).scrollTop()); 
 
    //this is for normal window: 
 
    // if($(window).scrollTop() + $(window).height() == $(document).height()) { 
 
    //this is for this test: 
 
    if ($(window).scrollTop()>100){ 
 
     $(".stuck").addClass("release").removeClass("stuck"); 
 
    } 
 
});

.stuck{ 
 
    position: fixed; 
 
    padding-left: 400px; 
 
} 
 

 
.release{ 
 
    position: relative; 
 
    top: 320px; 
 
    padding-left: 400px; 
 
} 
 

 
.main{ 
 
    width: 400px; 
 
    height: 1000px; 
 
} 
 
.left{ 
 
    margin-top: 300px; 
 
    width: 70%; 
 
    float: left; 
 
} 
 

 
.right{ 
 
    width: 30%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="right stuck"> 
 
     here i am 
 
    </div> 
 
    <div class="left"> 
 
     will you send me an angel 
 
    </div> 
 
</div> 
 

或小提琴如果PREF：fiddle example