讓html中的元素隨著捲軸移動

如題，這個功能在比較動態的網頁應該都很常用，以前要用長的可怕的js code才有辦法達成，現在用jquery，幾行code就輕鬆搞定
當然，要使用這個功能，務必在html的head中讀入jquery，此處不贅言，直接切入script
以下code主要參考Keep element in view while scrolling using jQuery這篇文章

 $().ready(function() {  
  var $scrollingDiv = $("#scrollingDiv"); // #scrollingDiv請改成自己要移動的元素
 
  $(window).scroll(function(){ 
   $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );   
  });
 });

有幾行值得特別說明
2.因為捲軸一移動，就會用到這個function，假如直接把這個DOM選取的動作存成一個jquery object，可以省去每次都尋找element的運算，效率會比較好
6.捲軸轉動的幅度可能很大，在第7行調整元素位置前，要先確保上個動作停止
7.animate是jquery內建調整css的函式；scrollTop是計算捲軸位置的函式。此處讓選取到的div的top margin隨著捲軸位置增加30px，即可確保這個div永遠距離頁面頂端30px