1

Eu coloquei minha sidebar para aparecer conforme a rolagem para abaixo. O problema é que, ao carregar a página, a sidebar fica visível, e ao rolar, ela "pisca" e volta a ficar visível (e quando rola a página para cima, ela desaparece, como deveria ser). Vou reproduzir o problema por aqui, mas para uma melhor visualização, aconselho abrir esse link: https://starslign.tumblr.com/

$(window).scroll(function() {
    if ($(this).scrollTop()>20){
        $('aside').fadeIn();
    }
    else{
        $('aside').fadeOut();
    }
});
aside{width: 280px; padding: 15px; background: #fff; border-bottom: 2px solid #f5f5f5; right: 70px; top: 70px; text-align: justify; position: fixed;}

.simage{width: 40px; height: 40px; border-radius: 100%; margin: 0; position: relative; vertical-align: middle;}

.url{display: inline-block; margin-left: 20px; vertical-align: middle;}
.url a{display: inline-block; margin-right: 5px; font-weight: 100;}

.tex{margin: 10px 0 0; padding: 10px;}

.entry{width: 500px; margin: 80px auto 50px; position: relative;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <aside>
            <img src="//66.media.tumblr.com/avatar_180ada37d481_128.pnj" class="simage"/>
            
            <div class="url">
                <a href="/">home</a>
                <a href="/">message</a>
                <a href="/">about</a>
                <a href="/">archive</a>
                <a href="/">credits</a>
            </div>
            
            <div class="tex">
                <p>if someone hates you, you would look at the moon and make a wish; you are just a little different from other people.
            </div>
        </aside>
            
        <div class="entry">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur fermentum erat dignissim feugiat. Morbi suscipit purus id consequat scelerisque. Maecenas pulvinar, sem ut tincidunt interdum, turpis nulla interdum massa, sit amet volutpat metus urna aliquam dolor. Ut dignissim tortor nec ante porttitor bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor aliquet vehicula. Aenean aliquet arcu arcu, a bibendum libero cursus sit amet. Nullam blandit efficitur libero sit amet blandit. Praesent vel risus ut sapien iaculis semper.

Mauris feugiat nunc non lacus interdum varius sed nec purus. Vivamus et odio porta, consequat nunc sit amet, tincidunt eros. Ut erat nunc, ornare sit amet ultricies non, porta a quam. Aliquam pretium sodales ex accumsan viverra. Suspendisse vitae eros vitae sem sodales pellentesque egestas vel libero. Nam at tortor rhoncus mauris lacinia lobortis. Duis porta condimentum lorem ultrices pellentesque. Curabitur massa sem, scelerisque ac rhoncus eget, pharetra vel elit. Praesent ac orci sed erat rutrum vulputate vel mattis erat.

Vestibulum aliquet, lacus id porttitor aliquet, dolor erat malesuada mauris, id porttitor magna lacus eget leo. Phasellus sed accumsan nunc. Donec vulputate mauris facilisis, ullamcorper nisl ac, placerat neque. Vestibulum venenatis scelerisque sem. Nam tempus augue non ultrices convallis. Phasellus consequat ex nec risus pellentesque, eu porta tortor lacinia. Praesent magna risus, mattis at luctus nec, gravida non nisi. Fusce ut nisl libero. Quisque ac turpis non turpis ultricies scelerisque. Suspendisse non feugiat arcu. Pellentesque lobortis interdum sem eu sodales. Duis quis eleifend est, at bibendum nulla. Nulla vitae aliquam mauris. Mauris eu lacus id enim consectetur faucibus.

Duis a massa tristique, ullamcorper est in, aliquet lectus. Cras rhoncus rutrum varius. Proin ut justo ac odio bibendum hendrerit in ac neque. Suspendisse vehicula, purus non ullamcorper molestie, odio velit mollis sem, nec blandit mi libero ut diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Vivamus aliquet iaculis sem. Nam vulputate tempus mattis. Donec felis quam, euismod vel felis non, sollicitudin imperdiet justo.

Donec sed molestie lorem. Proin felis mauris, iaculis quis justo in, tempus laoreet massa. Aenean id sodales elit. Nulla sem massa, porttitor vitae dignissim congue, volutpat ut magna. Integer ut aliquet tellus. Sed nibh eros, posuere nec tortor ut, hendrerit sodales quam. Maecenas auctor ex ex, eget condimentum elit vulputate quis. Aliquam erat volutpat. Aenean eu justo et urna laoreet porttitor. Cras in elit libero. Cras vel malesuada arcu. Quisque iaculis vulputate nisi. Nunc eu magna et nisl facilisis aliquet ac et arcu. Nunc et ex nec neque bibendum suscipit lacinia quis justo. Nunc aliquam sem nec mauris facilisis sodales.
        </div>
      

4
  • O problema é que a página já inicia mostrando o Aside. Vc quer que continue dessa maneira? Pois a forma mais símples de resolver é apenas colocando um display:none no css dela. Mas dessa forma quando vc entra na página esse Aside vai ficar oculto...
    – hugocsl
    Commented 6/06/2019 às 18:07
  • basta adicionar display:none no css do aside Commented 6/06/2019 às 18:11
  • lua, nessa resposta eu dou alguma dicas para esse tipo de algoritmo não impactar na performance da página. Vale a pena estudar um pouco sobre debounce, throttle e também sobre a opção passive do Element.addEventListener. Commented 6/06/2019 às 18:21
  • Oi Fernando, obrigada por essa resposta. A minha falta de conhecimento em Jquery/Javascript acaba me deixando um pouco perdida, mas estou procurando estudar sobre o assunto e qualquer dica é muito bem-vinda :)
    – lua
    Commented 6/06/2019 às 18:24

1 Resposta 1

2

Primeiro você deve colocar a propriedade display: none na aside para que ele já comece oculta.

E colocar .stop() antes dos efeitos fadeIn e fadeOut para que quando um for disparado não atropele o outro:

$(window).scroll(function() {
    if ($(this).scrollTop()>20){
        $('aside').stop().fadeIn();
    }
    else{
        $('aside').stop().fadeOut();
    }
});
aside{display: none; width: 280px; padding: 15px; background: #fff; border-bottom: 2px solid #f5f5f5; right: 70px; top: 70px; text-align: justify; position: fixed;}

.simage{width: 40px; height: 40px; border-radius: 100%; margin: 0; position: relative; vertical-align: middle;}

.url{display: inline-block; margin-left: 20px; vertical-align: middle;}
.url a{display: inline-block; margin-right: 5px; font-weight: 100;}

.tex{margin: 10px 0 0; padding: 10px;}

.entry{width: 500px; margin: 80px auto 50px; position: relative;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside>
            <img src="//66.media.tumblr.com/avatar_180ada37d481_128.pnj" class="simage"/>
            
            <div class="url">
                <a href="/">home</a>
                <a href="/">message</a>
                <a href="/">about</a>
                <a href="/">archive</a>
                <a href="/">credits</a>
            </div>
            
            <div class="tex">
                <p>if someone hates you, you would look at the moon and make a wish; you are just a little different from other people.
            </div>
        </aside>
            
        <div class="entry">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur fermentum erat dignissim feugiat. Morbi suscipit purus id consequat scelerisque. Maecenas pulvinar, sem ut tincidunt interdum, turpis nulla interdum massa, sit amet volutpat metus urna aliquam dolor. Ut dignissim tortor nec ante porttitor bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor aliquet vehicula. Aenean aliquet arcu arcu, a bibendum libero cursus sit amet. Nullam blandit efficitur libero sit amet blandit. Praesent vel risus ut sapien iaculis semper.

Mauris feugiat nunc non lacus interdum varius sed nec purus. Vivamus et odio porta, consequat nunc sit amet, tincidunt eros. Ut erat nunc, ornare sit amet ultricies non, porta a quam. Aliquam pretium sodales ex accumsan viverra. Suspendisse vitae eros vitae sem sodales pellentesque egestas vel libero. Nam at tortor rhoncus mauris lacinia lobortis. Duis porta condimentum lorem ultrices pellentesque. Curabitur massa sem, scelerisque ac rhoncus eget, pharetra vel elit. Praesent ac orci sed erat rutrum vulputate vel mattis erat.

Vestibulum aliquet, lacus id porttitor aliquet, dolor erat malesuada mauris, id porttitor magna lacus eget leo. Phasellus sed accumsan nunc. Donec vulputate mauris facilisis, ullamcorper nisl ac, placerat neque. Vestibulum venenatis scelerisque sem. Nam tempus augue non ultrices convallis. Phasellus consequat ex nec risus pellentesque, eu porta tortor lacinia. Praesent magna risus, mattis at luctus nec, gravida non nisi. Fusce ut nisl libero. Quisque ac turpis non turpis ultricies scelerisque. Suspendisse non feugiat arcu. Pellentesque lobortis interdum sem eu sodales. Duis quis eleifend est, at bibendum nulla. Nulla vitae aliquam mauris. Mauris eu lacus id enim consectetur faucibus.

Duis a massa tristique, ullamcorper est in, aliquet lectus. Cras rhoncus rutrum varius. Proin ut justo ac odio bibendum hendrerit in ac neque. Suspendisse vehicula, purus non ullamcorper molestie, odio velit mollis sem, nec blandit mi libero ut diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Vivamus aliquet iaculis sem. Nam vulputate tempus mattis. Donec felis quam, euismod vel felis non, sollicitudin imperdiet justo.

Donec sed molestie lorem. Proin felis mauris, iaculis quis justo in, tempus laoreet massa. Aenean id sodales elit. Nulla sem massa, porttitor vitae dignissim congue, volutpat ut magna. Integer ut aliquet tellus. Sed nibh eros, posuere nec tortor ut, hendrerit sodales quam. Maecenas auctor ex ex, eget condimentum elit vulputate quis. Aliquam erat volutpat. Aenean eu justo et urna laoreet porttitor. Cras in elit libero. Cras vel malesuada arcu. Quisque iaculis vulputate nisi. Nunc eu magna et nisl facilisis aliquet ac et arcu. Nunc et ex nec neque bibendum suscipit lacinia quis justo. Nunc aliquam sem nec mauris facilisis sodales.
        </div>

2
  • 1
    Obrigada pela ajuda Sam, funcionou perfeitamente :))
    – lua
    Commented 6/06/2019 às 18:18
  • Disponha amiga. QQ coisa é só falar ;)
    – Sam
    Commented 6/06/2019 às 18:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .