崩壊と私は500pxなどを下にスクロールした後onScroll

Question

// Schließen Button Hauptnavigation 
 
    $('button#collapse-button').click(function() { 
 
     $('nav#main-nav').toggleClass('closed'); 
 
    }); 
 
    
 
    
 
    $(window).on('scroll', function() { 
 
     if ($(window).scrollTop() >= 500) {   
 
      $('nav#main-nav').addClass('closed'); 
 
     } 
 
    })

#header{ 
 
    height:500px; 
 
    width:100%; 
 
    background-color:darkslateblue; 
 
} 
 
#content{ 
 
    background:#ccc; 
 
    height:900px; 
 
    width:100%; 
 
} 
 
#main-nav{ 
 
    width:200px; 
 
    height:300px; 
 
    background: #fff; 
 
    display:inline-block; 
 
    position:fixed; 
 
    left:0; 
 
    top:50px; 
 
    transition:all 400ms ease; 
 
} 
 
.closed{ 
 
    left:-200px !important; 
 
} 
 
#collapse-button{ 
 
    float:right; 
 
    width:20px; 
 
    background:yellow; 
 
} 
 
.closed button{ 
 
    margin-right:-20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
header 
 
<br><br> 
 
<nav id="main-nav"> 
 
    <button id="collapse-button">X</button> 
 
</nav> 
 
</div> 
 
<div id="content"> 
 
    content 
 
</div>

こんにちはすべて、 ナビゲーション崩壊を展開するには。 しかし、500px（紫色の見出しの下にある）の下のナビゲーションをクリックしてスクロールしようとすると、ナビゲーションが再び崩壊します。

クリックの振る舞いがスクロールの動作よりも上にある可能性がありますか？あなたは、ナビゲーションをスクロールすることはもはや影響を受けていることをクリックしないで開いたり、手動で閉じた場合は、ユーザーいったん非表示にするボタンをクリックした場合それは/ ..、悪い英語

Answer 1

ため

SRYです表示、次にスクロールコードは、クリックで.offスクロールイベントを実行してはいけません。

$(window).off('scroll'); 

これにより、スクロールの変更の監視が停止されます。

// Schließen Button Hauptnavigation 
 
    $('button#collapse-button').click(function() { 
 
     $('nav#main-nav').toggleClass('closed'); 
 
     $(window).off('scroll'); 
 
    }); 
 
    
 
    
 
    $(window).on('scroll', function() { 
 
     if ($(window).scrollTop() >= 500) {   
 
      $('nav#main-nav').addClass('closed'); 
 
     } 
 
    })

#header{ 
 
    height:500px; 
 
    width:100%; 
 
    background-color:darkslateblue; 
 
} 
 
#content{ 
 
    background:#ccc; 
 
    height:900px; 
 
    width:100%; 
 
} 
 
#main-nav{ 
 
    width:200px; 
 
    height:300px; 
 
    background: #fff; 
 
    display:inline-block; 
 
    position:fixed; 
 
    left:0; 
 
    top:50px; 
 
    transition:all 400ms ease; 
 
} 
 
.closed{ 
 
    left:-200px !important; 
 
} 
 
#collapse-button{ 
 
    float:right; 
 
    width:20px; 
 
    background:yellow; 
 
} 
 
.closed button{ 
 
    margin-right:-20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
header 
 
<br><br> 
 
<nav id="main-nav"> 
 
    <button id="collapse-button">X</button> 
 
</nav> 
 
</div> 
 
<div id="content"> 
 
    content 
 
</div>

Answer 2

メニューがとても似クリックされたかどうかを示すブールフラグを使用します。

var openedByClick = false; 
    // Schließen Button Hauptnavigation 
    $('button#collapse-button').click(function() { 
     $('nav#main-nav').toggleClass('closed'); 
     openedByClick = true; 
    }); 


    $(window).on('scroll', function() { 
     if ($(window).scrollTop() >= 500 && !openedByClick) {   
      $('nav#main-nav').addClass('closed'); 
     } 
    }) 

ヒント：グローバル変数を導入しそのない彼素敵なソリューションを提供します。