切換位置固定和靜態

我有2列。右欄是一個正常的可滾動內容窗格。類名爲sticky的左列是我試圖在固定和靜態定位之間切換的列。當您滾動右欄直到結束時，它必須保持固定。當您到達右欄的末尾（並且下一個部分變得可見）時，div的位置必須變爲靜態，並且通過頁面正常滾動。以下部分必須以相同的方式（通常）滾動，直到它到達瀏覽器窗口的頂部，當前視圖中的sticky div變爲固定位置。切換位置固定和靜態

HTML：

<section> 
    <div class="c-2 sticky"></div> /* Background image */ 
    <div class="c-2"> 
     <p>Any volume of content. Must cater for long and short pieces</p> 
     .... 
    </div> 
</section>

CSS：

.content { 
    width: 100%; 
    overflow: hidden; 
    float: left; 
    padding-left: 130px; 
    position: relative; 
} 

.c-2 { 
    position: relative; 
    width: 50%; 
    left: 50%; 
    overflow: hidden; 
    background: #e4f; 
} 

    .c-2.sticky { 
     background: url(img/holder.jpg) fixed top center no-repeat #fff; 
     -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
       background-size: cover; 
     position: fixed; 
     left: 0; 
     width: 60%; 
    }

的JS就是我倒下，我只是不知道如何開始這樣做。我試過使用StickyKit但沒有任何運氣。我在這裏有一個JSFiddle：http://jsfiddle.net/6HPX5/

來源

2013-10-28 egr103

推廣更好的解釋像這個問題在stackoverflow上皺起了眉頭。但是，我確實提供了一些想法，以幫助您開始或至少了解如何實現目標...... \ – user1470118

您好，請查看本演示，並告訴我，如果這樣的事情是你想要什麼http://jsfiddle.net/6HPX5/130/然後我可以對這個.

來源

2013-10-28 19:58:23 DaniP

是的，這是輝煌的，正是我期待的。我似乎無法將其整合到我的網站中，儘管如此解釋會非常有幫助。謝謝！ – egr103

更多信息上面：左側欄不會粘住，頁面正常滾動。開發工具不會帶來任何錯誤，也不會顯示正在添加/刪除的abs或修復類。請參閱工作代碼：http://176.32.230.2/baodev.com/cjo/有什麼想法？ – egr103

試着在函數中添加一個console.log（'msj'）或者跟蹤任何一個var到window.scroll函數中，我們現在可以在這個問題的位置 – DaniP

您需要在新節的開始位置放置一個「錨點」，然後使用jQuery，您需要查看該元素的位置，然後一旦確定錨是可見的使用jQuery（id）.css（）選項來改變位置。

或者另一種方法是跟蹤滾動，當左邊的元素需要移動時，使用動畫將其移出屏幕。

UPDATE

http://api.jquery.com/css/ - 改變位置屬性。

http://api.jquery.com/scroll/ - 檢測滾動

http://api.jquery.com/position/或http://api.jquery.com/offset/ - 讓你的錨的位置。

然後你補充一點：

jQuery(window).scroll(function(e) { 
    //track scrolling 
});

來源

2013-10-28 16:15:59 user1470118

我明白您的觀點，但是您能否提供指向您參考的資源的任何鏈接？ – egr103

我更新了回覆。你可以使用這些工具來做你想做的事。 – user1470118

切換位置固定和靜態

回答

相關問題