Question

这是我的侧边栏：

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

我试图用这个脚本隐藏它

<!– 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 –>

使用此脚本，“滚动显示”功能可以正常工作，但是当您点击链接时，“跳转到名称标签”将无效，相反，页面将跳转到顶部。当我删除脚本时，跳转到名称标签工作，但侧边栏不再隐藏。我如何让它工作？（这个，侧边栏'显示滚动'并跳转到正确的名称标签？）

Answer 1

scroll()方法是on('scroll', handler)的别名，是在滚动时触发的事件处理程序，$(window).scrollTop()返回距离顶部的像素距离。您想根据需要自定义隐藏动画效果，我建议.animate()，.hide()或.fadeOut()

<强>的JavaScript

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

然后点击锚点<a href='#week36'>WEEk 36 </a>应该按预期工作，如果您希望将滚动动作设置为该元素的动画，则应该查看this SO Answer。

在这种情况下，我建议为每个链接添加一个类，例如animated-scroll，如下所示：

<强>的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>

致谢：

检查jquery文档

scroll()

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

1 个答案: