無法讓我的菜單與「StickyPanel」配合使用

我對創建網站有點新，所以請耐心等待。無法讓我的菜單與「StickyPanel」配合使用

我剛開始一個新項目，我想要一個菜單，當你滾動，然後停止，當它到達頁面的頂部。我發現了一個非常酷的JavaScript插件，名爲"StickyPanel"（https://code.google.com/p/sticky-panel/），但它不會合作。顯然沒有說明，我找不到任何有用的信息，其他地方。

的代碼非常簡單：

<script src="js/jquery.js"></script> 
<script src="js/jquery.stickyPanel.min.js"></script> 

<!-----Sticky Panel------> 

<script type="text/javascript"> 
     $().ready(function() { 

      var stickyPanelOptions = { 
       afterDetachCSSClass: "", 
       savePanelSpace: true 
      }; 
      $("header").stickyPanel(stickyPanelOptions); 
     }); 
    </script> 

    <script> 
     $(document).ready(function(){ 
      $(".nav-button").click(function() { 
      $(".nav-button,.menu").toggleClass("open"); 
      });  
     }); 
    </script> 

<!-----Sticky Panel------>

然後我做了一個div類被稱爲「頭」，然後風格的標題菜單。我無法讓JavaScript對我的標題做任何事情。我究竟做錯了什麼？

來源

2013-03-11 user2157183

 $("header").stickyPanel(stickyPanelOptions);

你問的Jquery的elemet頭你要問jQuery的類頭=>

 $(".header").stickyPanel(stickyPanelOptions);

閱讀slectors它的有用！

 <header> is a html5 element, support by almost all browser but dont forget display: block in css!

來源

2013-03-11 15:21:53 user666

謝謝你的快速anwser。我已經嘗試了你的建議，但這也不起作用：（我發現一個網站有相同的JavaScript插件也許可以幫助。是否允許鏈接到他的網站？ – user2157183 2013-03-11 15:30:36

ow，以及你改變頭。頭作爲選擇器？給我第二個 – user666 2013-03-11 15:32:28

你喜歡做這樣的事嗎？http://jsfiddle.net/9tjqS/ – user666 2013-03-11 15:37:53

使用$(".header")而不是$("header")

來源

2013-03-11 15:24:04 codeVerine

還有另一種方式把它選擇的div，如果你不想使用這個插件。在互聯網上的某個地方找到了這個代碼它採用position:fixed css樣式，簡單的JS

的JavaScript

<script type="text/javascript"> 
    window.onload = function() { 
    $(window).scroll(function() { 
    var e = $("#StickyPanel"); 
    if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) { 
    if ($.browser.msie && $.browser.version == "6.0") 
    { 
    e.css("top", document.documentElement.scrollTop + 15 + "px") } 
    else { 
    e.css({ position: "fixed", top: "1%" }) } } 
    else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602) 
    {    
    e.css({ position: "absolute", top: "91%" }) } }) } 
    </script>

CSS

#search 
{ 
    position: absolute; 
    top: 91%; 
}

只是改變了值

根據您的需要

希望它可以幫助

。

這是你所要求的： 的jsfiddle jsfiddle demo

來源

2013-03-11 15:30:18 Nikhar

謝謝我會試試看:) – user2157183 2013-03-11 15:37:22

@ user2157183你可以查看演示 – Nikhar 2013-03-11 15:56:37

無法讓我的菜單與「StickyPanel」配合使用

回答

相關問題