當然,要使用這個功能,務必在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
沒有留言:
張貼留言