How to show a sidebar when scrolling and hide it when at the top of the page?

Question

This is my sidebar:

<ul id="sidebarupcoming">
<li><a href="#week36">WEEK 36 </a></li>
<li><a href="#week37">WEEK 37 </a></li>
<li><a href="#week38">WEEK 38 </a></li>
</ul>

And I tried to hide it with this script

<!– Scroll –>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/Qqfkzalyi/jquery.scroll.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/7xukzalz8/jquery.easing.js"></script>
<script type="text/javascript">
$(function() {
$("#sidebarupcoming").scrollToTop({speed:500,start:700});
});
</script>
<!– / Scroll –>

With this script the 'show on scroll' function works, but when you click on the links the 'jump to name tag' won't work, instead, the page will jump to the top. When I remove the script, jumping to the name tag works, but the sidebar isn't hidden anymore. How do I get this to work? (that this, sidebar 'showing on scroll' and jumping to the right name tag?)

the scrolltotop plugin sounds like its doing its job??? Scrolling to the top? no? — cjross, Aug 29 '13 at 11:04
type "scroll to tag jquery plugin" into google. scroll to top is not suitable for that kind of behaviour. — cjross, Aug 29 '13 at 11:20

score 1 · Accepted Answer · edited May 23 '17 at 11:59

The scroll() method is an alias for on('scroll', handler), an event handler that is triggered on scroll, $(window).scrollTop() returns the distance in pixels from the top. You made like to customise the hiding animation effect to your needs, I recommend .animate(), .hide(), or .fadeOut()

JavaScript

$(function() {
    $(window).scroll(function(e) {
        if ($(this).scrollTop() > 700)
        {
            $("#sidebarupcoming").fadeIn("slow");
        }
        else
        {
            $("#sidebarupcoming").hide(); 
        }
    });
});

And click on the anchors <a href='#week36'>WEEk 36 </a> should work as expected, if you wish to animate a scrolling motion to that element you should look at this SO Answer.

In that case I would recommend adding a class to each of these links such as animated-scroll like below:

JavaScript

$(".animated-scroll").click(function (e){
    var elementID = $(this).attr('href');
    e.preventDefault(); // stop default behaviour
    $('html, body').animate({
        scrollTop: $(elementID).offset().top
    }, 2000);
});

HTML

<ul id="sidebarupcoming">
  <li><a href="#week36" class='animated-scroll'>WEEK 36 </a></li>
  <li><a href="#week37" class='animated-scroll'>WEEK 37 </a></li>
  <li><a href="#week38" class='animated-scroll'>WEEK 38 </a></li>
</ul>

Credits:

Check the jquery docs

scroll()

How to show a sidebar when scrolling and hide it when at the top of the page?

1 Answers1