我的菜單無法與“ StickyPanel”一起使用

Question

我對創建網站有點陌生，請耐心等待。

我剛剛開始一個新項目，我想要一個滾動菜單，然后在到達頁面頂部時停止。 我找到了一個非常酷的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------>

然后，我創建了一個名為“ header”的div類，然后設置了標題菜單的樣式。 我無法使用JavaScript對標頭執行任何操作。 我究竟做錯了什么？

Answer 1

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

您向Jquery詢問elemet標頭您需要向jquery詢問類標頭=>

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

了解有用的選音器！

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

Answer 2

使用$(".header")而不是$("header")選擇div

Answer 3

如果您不想使用此插件，則還有另一種方法。 在互聯網上的某個地方找到了此代碼。 它使用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%;
 }

只需更改值

602

根據您的需要

希望能幫助到你。

這是您要的： JSFIDDLE jsfiddle演示