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

這是我的側邊欄：如何在頁面頂部滾動並隱藏邊欄時顯示邊欄？

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

這個腳本功能的「上滾動顯示」工程，以隱藏它，但是當你點擊鏈接'跳轉到名稱標記'將不起作用，相反，該頁面將跳轉到頂部。當我刪除腳本時，跳轉到名稱標籤的作品，但側邊欄不再隱藏。我如何得到這個工作？（這，邊欄「表示上滾動」和跳躍到正確的名稱標籤？）

來源

2013-08-29 M' ' '

的scrolltotop插件聽起來像它做它的工作???滾動到頂部？沒有？ – cjross

我希望它跳轉到給定的名稱標籤。例如 –

鍵入「滾動到標記jquery插件」到谷歌。滾動到頂部不適合這種行爲。 – cjross

的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()

來源

2013-08-29 11:30:24 cjross

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

回答

相關問題