Zusammenbruch und 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>

Hallo, die Navigation einklappen ausklappen, nachdem ich blättern 500px nach unten. Aber wenn ich die Navigation unter dem 500px (unter lila Header-div) durch Klicken öffnen und versuchen, einen Bildlauf durchzuführen, kollabiert die Navigation wieder.

Kann das Klickverhalten über dem Scroll-Verhalten liegen? Das heißt, wenn Sie geöffnet haben oder manuell geschlossen, indem Sie auf, dass die Navigations Scrollen nicht mehr betroffen ..

sry für schlechtes Englisch

Answer 1

Wenn Sie möchten, dass, sobald der Benutzer auf die Schaltfläche geklickt verstecken/zeigen, dann Scroll-Code sollte nicht ausgeführt werden, dann klicken Sie auf .off das Scroll-Ereignis.

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

Dies wird die Überwachung der Bildlaufänderungen stoppen.

// 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

ein boolesches Flag, um anzuzeigen, zu verwenden, wenn das Menü wie so geklickt wurde:

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'); 
     } 
    }) 

Hinweis: Es ist nicht er schönste Lösung, die eine globale Variable einzuführen.