如何限制視窗滾動動畫的CSS值限制？

限制視窗捲動動畫的CSS 值限制

在此場景中，使用者遇到地圖元素在捲動時滑動的問題往下翻頁。但是，地圖會繼續無限滾動，由於頁腳的存在，導致使用者無法到達頁面底部。

目標是限制

的滾動。表示當地圖到達另一個動態大小的

的底部時的地圖。

提供的JavaScript 程式碼讓地圖隨著使用者滾動而移動：

<pre class="brush:php;toolbar:false">$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

解決問題

不建議在滾動函數中使用animate () 方法，因為它可能會因滾動值的連續變化而導致衝突，從而阻止jQuery 執行重複的動畫。僅使用 stop() 函數可能無法完全解決問題。

建議使用 CSS 方法。以下是範例：

<pre class="brush:php;toolbar:false">$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if ( scrollVal > offset.top) {
        $sidebar.css({
           'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'
                       //added +'px' here to prevent old internet explorer bugs
        });
    } else {
        $sidebar.css({'margin-top':'0px'});
    }
});

此外，避免在計算中使用多個 if else 語句，因為這也可能導致衝突。

替代方法

對於目標是將導航元素固定在特定滾動位置的場景，請考慮以下方法：

<pre class="brush:php;toolbar:false">$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
      //this will calculate header's full height, with borders, margins, paddings
       console.log(headerH);
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
        //when scroll value reach to your selector
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });

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