0112月
瀏覽器滾動到指定位置時固定DIV
如果單純設定 position : fixed ,DIV 會在捲軸開始滾動時就啟動固定元素,但想要瀏覽到指定位置時才啟用該怎麼辦呢?只要兩步驟教你輕鬆解決!
STEP1
</body> 前加入下面這段 javascript 。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($) { function fixDiv() { var $cache = $('#getFixed'); if ($(window).scrollTop() > 100) $cache.css({ 'position': 'fixed', 'top': '指定位置的px' }); else $cache.css({ 'position': 'relative', 'top': 'auto' }); } $(window).scroll(fixDiv); fixDiv(); }); </script>
STEP2
把所需固定的元素外面包 id = " getFixed " ,還可以使用CSS稍作調整即可完成。
<div id="getFixed">所需固定的元素</div>