自定義jQuery滾動條

Question

我正在使用名爲Tiny Scrollbar的自定義滾動條插件。滾動條內有手風琴式導航。

我的問題是滾動條不更新導航高度更改時，任何人有任何想法？我在想每個點擊都可能有某種形式的Ajax更新，但是我沒有Ajax的經驗，所以我不知道。這是導航的代碼。

<div id="nav-container"> 
    <div class="scrollbar"> 
    <div class="track"> 
     <div class="thumb"> 
     <div class="end"></div> 
     </div> 
    </div> 
    </div> 
<div class="viewport"> 
    <div class="overview"> 
    <nav class="main"> 

    <div class="menu-item"> 
     <h4><a href="#">Inledning</a></h4> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
    </div> 

    </nav> 
    </div> 
</div> 
</div> 

的jQuery：

$(document).ready(function() { 
var $ul = $('ul'); 

$("h4").click(function() { 
    $("h4").removeClass("menu-selected"); 
    $ul.hide("blind", 1000); 
$(this).toggleClass("menu-selected"); 
    $(this).next().show("blind", 1000); 
}); 

$("li").click(function() { 
    $("li").removeClass("select"); 
    $(this).addClass("select"); 
    }); 
}); 

Answer 1

在微小的滾動條的網站，它說的是，當添加新的內容需要更新保持容器。例如

//The update method can be used for adjusting a scrollbar to its new content. 
var yourScrollBar = $('nav-container'); 
yourScrollBar.tinyscrollbar(); 

//The below function would be called when updating the content. 
yourScrollBar.tinyscrollbar_update(); 

上面的代碼是從plugin website.

例如與您的代碼的例子。

$("h4").click(function() { 
    $("h4").removeClass("menu-selected"); 
    $ul.hide("blind", 1000); 
    $(this).toggleClass("menu-selected"); 
    $(this).next().show("blind", 1000); 
    yourScrollBar.tinyscrollbar_update(); <-------- Here. 
});