javascript - メニューを「StickyPanel」で動作させることができません

Question

私はウェブサイトの作成に少し慣れていないので、我慢してください。

新しいプロジェクトを開始したばかりで、スクロールすると表示され、ページの上部に到達すると停止するメニューが必要でした。"StickyPanel"（https://code.google.com/p/sticky-panel/ ）という本当にクールなJavaScriptプラグインを見つけましたが、連携しません。どうやら指示はなく、他の場所で役立つ情報を見つけることができません。

コードは非常に単純です。

<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「header」というクラスを作成し、header-menuのスタイルを設定しました。JavaScriptでヘッダーを処理できません。私は何が間違っているのですか？

Answer 1

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

elemet ヘッダーを Jquery に要求します クラス ヘッダーを jquery に要求する必要があります =>

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

セレクターについて読んでください。

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

Answer 2

このプラグインを使用したくない場合は、別の方法があります。インターネットのどこかでこのコードを見つけました。それはposition:fixedcssスタイル、シンプルな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 デモ

Answer 3

$(".header")代わりに使用してdivを選択します$("header")