如何在滚动时显示侧边栏，并在页面顶部将其隐藏？

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?)

Answer 1

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:

• That SO answer link again by Steve
• Original source from above SO link

Check the jquery docs

• scroll()