jQuery(window).height()代表了當前可見區域的大小,而jQuery(document).height()則代表了整個文檔的高度,可視具體情況使用.
注意當瀏覽器窗口大小改變時(如最大化或拉大窗口后) jQuery(window).height() 隨之改變,但是jQuery(document).height()是不變的。
$(document).scrollTop() 獲取垂直滾動的距離 即當前滾動的地方的窗口頂端到整個頁面頂端的距離
$(document).scrollLeft() 這是獲取水平滾動條的距離
要獲取頂端 只需要獲取到scrollTop()==0的時候 就是頂端了
要獲取底端 只要獲取scrollTop()>=$(document).height()-$(window).height() 就可以知道已經滾動到底端了
jQuery判斷div隨滾動條滾動到一定位置后停止:
<script type="text/javascript"> var rollSet = $('#widget'); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height(); if (offset.top < scrollTop) { if (scrollBtm > fwidth) { rollSet.removeClass('absolute').addClass('fixed') } else { rollSet.removeClass('fixed').addClass('absolute') } } else { rollSet.removeClass('fixed') } }) </script>
方法說明:
由頁面總高度減去已滾動的高度再減去ID為widget的層的高度即等于該層底部距離底部的高度;
當距離底部的高度小于或等于特定位置距離底部的高度時,去掉樣式fixed,然后給該層添加絕對定位!
CSS中要給父父層添加position:relative;