如何用CSS限制滾動動畫範圍？

為視窗滾動動畫設定CSS 值的界限

問題陳述

實現動態滾動效果時，例如作為與使用者滾動同步移動的地圖，可能需要限制滾動範圍以防止使用者無休止地到達頁面底部。

CSS 解決方案

將 animate() 方法與滾動事件一起使用可能會導致衝突和無限動畫循環。相反，請考慮使用CSS 方法來設定margin-top：

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal > offset.top) {
        $sidebar.css({'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'});
    } else {
        $sidebar.css({'margin-top': '0px'});
    }
});

元素定位的替代方法

在使用margin-top 定位元素可能無法實現的情況下如果可行的話，可以採取替代方法。考慮一個場景，其中所需的行為是在滾動到達某個點時修復元素：

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
       var scrollVal = $(this).scrollTop();
        if (scrollVal > headerH) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​

以上是如何用CSS限制滾動動畫範圍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！