"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como limitar os limites de valores CSS da animação de rolagem de janela?

Como limitar os limites de valores CSS da animação de rolagem de janela?

Publicado em 2024-11-10
Navegar:859

How to Limit CSS Value Limits of Window Scrolling Animation?

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

que representa o mapa quando ele atinge a parte inferior de outro
de tamanho dinâmico.

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'});
        }
    });
 });
Tutorial mais recente Mais>

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