將元素粘貼到頁面頂部的滾動上，然後將它移開？

Question

我想創建一個類似的效果到這個頁面，如果你去宣言，你會看到當用戶滾動時，左邊的棍子example標題。當面板結束時，標題就會離開。

我想與IM不確定3塊板做這個如何去它和JS寫的香港專業教育學院沒有任何應用

https://jsfiddle.net/HV9HM/5906/

var stickyTop = $('h2').offset().top; 

$(window).on('scroll', function(){ 
     if ($(window).scrollTop() >= stickyTop) { 
      $('h2').css({position: "fixed", top: "0px"}); 
     } else { 
      $('h2').css({position: "relative", top: "0px"}); 
     } 
    }); 

---

更新

我已經建立了一些更接近我需要的東西，但我遇到的問題是，當您向下滾動到第在下一節中，我希望第一部分的標題能夠貼在父母的底部 - 這是否合理？繼承人一個例子jsfiddle.net/HV9HM/5910

Answer 1

你需要把你的代碼放在ready函數中，因爲你試圖訪問一個沒有完全加載的元素，這就是爲什麼你會得到一個錯誤if你檢查控制檯。

$(function(){ // need this ready function 

    var stickyTop = $('h2').offset().top; 

    $(window).on('scroll', function(){ 

     if ($(window).scrollTop() >= stickyTop) { 
      $('h2').css({position: "fixed", top: "0px"}); 
     } else { 
      $('h2').css({position: "relative", top: "0px"}); 
     }; 

    }); 

}); 

Answer 2

試試這個：

$(function(){ 
var stickyTop=""; 
$(window).on('scroll', function(){ 
     if ($(window).scrollTop() >= stickyTop) { 
      stickyTop = $('h2').offset().top; 
      $('h2').css({position: "fixed", top: "0px"}); 
     } else { 
      stickyTop = $('h2').offset().top; 
      $('h2').css({position: "relative", top: "0px"}); 
     } 
    }); 
});