Ограничение ограничений значений 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