«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Как ограничить пределы значений CSS для анимации прокрутки окна?

Как ограничить пределы значений CSS для анимации прокрутки окна?

Опубликовано 10 ноября 2024 г.
Просматривать:309

How to Limit CSS Value Limits of Window Scrolling Animation?

Ограничение ограничений значений CSS для анимации прокрутки окна

В этом сценарии пользователь сталкивается с проблемой, когда элемент карты скользит при прокрутке вниз по странице. Однако карта продолжает прокручиваться бесконечно, не позволяя пользователю достичь нижней части страницы из-за наличия нижнего колонтитула.

Цель состоит в том, чтобы ограничить прокрутку

, представляющего карту, когда она достигает нижней части другого
динамического размера.

Предоставленный код JavaScript анимирует перемещение карты при прокрутке пользователем:

$(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. Вот пример:

$(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 в ваших расчетах, так как это также может вызвать конфликты.

Альтернативный подход

Для В сценариях, где целью является зафиксировать элемент навигации в определенной позиции прокрутки, рассмотрите следующий подход:

$(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'});
        }
    });
 });
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3