如何限制窗口滚动动画的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中文网其他相关文章！