Início / coding / Perguntas / 79556088
Accepted
user2828701
Asked: 2025-04-05 03:03:47 +0800 CST

Ao mudar de rolagem de elementos fixos para relativos, piscando

  • 772

Estou trabalhando em um projeto no qual estou tentando transformar um elemento fixo em um elemento relativo à medida que o usuário rola a tela passando por um elemento na página.

O elemento é fixo por padrão. Conforme o usuário rola a página, adiciono uma classe que adiciona uma classe adicional, que altera a posição de fixa para relativa, além de algumas outras alterações de CSS.

No momento, ao rolar a tela para o elemento, os elementos e/ou a página piscam ou piscam. Pelo que vejo, isso acontece porque a classe está sendo adicionada e removida repetidamente, mas não consigo entender o porquê.

<div class="main">
  <div class="inner">
    <div class="maincontent">
      some content
    </div>
    <div class="fixed">
      hola
    </div>
    <div class="last">
      this is the last content.  I want my fixed content to be inline as I scrolle past.
    </div>
    <div class="footer">
      Footer Content
    </div>
  </div>
  
</div>

$(window).on('scroll', function(){
  var windowTop = $('.fixed').offset().top;
  if (windowTop >= $('.last').offset().top && !$('.fixed').hasClass('.optBTM')) {
    $('.fixed').addClass('optBTM');
  } else if(windowTop < $(".last").offset().top && $('.fixed').hasClass('.optBTM')){

  }else {
    //console.log('poll scroll no fixed')
    $('.fixed').removeClass('optBTM');
  }
});

.maincontent{
  height: 800px;
  background:#d3d3d4;
}
.fixed{
  position:fixed;
  width:100%;
  height:50px;
  background: #fff;
  bottom:0;
  padding:10px;
  box-shadow:0px -4px 12px 0px #0000000D;
}
.footer{
  background:#555;
  height:150px;
}
.optBTM{
  background: unset !important;
  position: relative !important;
  box-shadow: unset !important;
  
}

jsFiddle

Qualquer informação que você possa nos dar será muito apreciada.

javascript

1 respostas

  1. Best Answer

    Mudar .fixed { position: sticky; }:

    $(window).on('scroll', function(){
  var windowTop = $('.fixed').offset().top;
  if (windowTop >= $('.last').offset().top && !$('.fixed').hasClass('.optBTM')) {
    $('.fixed').addClass('optBTM');
  } else if(windowTop < $(".last").offset().top && $('.fixed').hasClass('.optBTM')){

  }else {
    //console.log('poll scroll no fixed')
    $('.fixed').removeClass('optBTM');
  }
});
    .maincontent{
  height: 800px;
  background:#d3d3d4;
}
.fixed{
  position: sticky;
  width:100%;
  height:50px;
  background: #fff;
  bottom:0;
  padding:10px;
  box-shadow:0px -4px 12px 0px #0000000D;
}
.footer{
  background:#555;
  height:150px;
}
.optBTM{
  background: unset !important;
  position: relative !important;
  box-shadow: unset !important;
  
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="main">
  <div class="inner">
    <div class="maincontent">
      some content
    </div>
    <div class="fixed">
      hola
    </div>
    <div class="last">
      this is the last content.  I want my fixed content to be inline as I scrolle past.
    </div>
    <div class="footer">
      Footer Content
    </div>
  </div>
  
</div>

    • 1

relate perguntas