Show div when scrolling only

Asked

Viewed 31 times

1

I put my sidebar to appear as you scroll down. The problem is that when you load the page, the sidebar becomes visible, and when you scroll, it "blinks" and becomes visible again (and when you scroll the page up, it disappears, as it should be). I will play the problem here, but for a better view, I advise to open this 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>

jquery

  • The problem is that the page already starts showing Aside. Do you want it to continue like this? Because the simplest way to solve it is just by putting a display:None in its css. But that way when you enter the page that Aside will be hidden...

  • just add display:none in the css of aside

  • moon, in that reply i give some tips for this type of algorithm does not impact the performance of the page. It is worth studying a little about debauch, Throttle and also on the option passive of Element.addEventListener.

  • Hi Fernando, thank you for that reply. My lack of knowledge in Jquery/Javascript ends up leaving me a little lost, but I’m looking to study on the subject and any hint is very welcome :)

1 answer

2


First you must place the property display: none in aside so that it already starts hidden.

And put .stop() before the effects fade and fadeOut so that when one is fired does not run over the other:

$(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>

  • 1

    Thanks for the help Sam, it worked perfectly :))

  • Dispose friend. QQ thing is just talk ;)

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.