Limitando os limites de valor CSS da animação de rolagem da janela
Neste cenário, um usuário está enfrentando um problema em que um elemento do mapa desliza enquanto rola abaixo da página. Porém, o mapa continua rolando indefinidamente, impedindo que o usuário chegue ao final da página devido à presença de um rodapé.
O objetivo é limitar a rolagem do
O código JavaScript fornecido anima o mapa para se mover conforme o usuário rola:
$(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 }); } }); });
Resolvendo o problema
O uso do método animate() dentro da função de rolagem não é aconselhável, pois pode levar a conflitos devido a mudanças contínuas no valor de rolagem, evitando que o jQuery execute animações repetitivas. A função stop() por si só pode não resolver o problema totalmente.
Em vez disso, é recomendado utilizar o método CSS. Aqui está um exemplo:
$(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'}); } });
Além disso, evite usar várias instruções if else em seus cálculos, pois isso também pode causar conflitos.
Abordagem alternativa
Para cenários onde o objetivo é fixar um elemento de navegação em uma posição de rolagem específica, considere a seguinte abordagem:
$(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'}); } }); });
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3