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

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

本文关键字：侧边栏 顶部 隐藏 滚动 显示      更新时间：2023-09-26

这是我的侧边栏：

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

使用此脚本，"滚动显示"功能有效，但是当您单击链接时，"跳转到名称标签"将不起作用，相反，页面将跳转到顶部。当我删除脚本时，跳转到名称标签有效，但侧边栏不再隐藏。我如何让它工作？(这个，侧边栏"在滚动上显示"并跳到正确的名称标签？

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>应该按预期工作，如果您希望对该元素的滚动运动进行动画处理，您应该查看此 SO 答案。

在这种情况下，我建议为每个链接添加一个类，如下所示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>

学分：

  • 史蒂夫再次回答链接
  • 来自上面的原始来源 SO 链接

查看 jquery 文档

  • 滚动((
相关文章：