如何在滾動時顯示側邊欄，並在頁面頂部將其隱藏？

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)的別名， 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 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>

學分：

• 史蒂夫 再次得到那個答案
• 來自SO鏈接的原始來源

檢查jQuery文檔

• 滾動（）