Navigation kehrt nicht zur ursprünglichen Position zurück, nachdem der Kurs entfernt wurde

Question

Der Code steuert meine Navigation. Beim Scrollen mit 300px wird auf dem Bildschirm angezeigt. Und Übergänge Off-Screen, wenn gescrollt wieder nach oben (scrollt mit Inhalt < 300px)

$(document).ready(function() { 
 

 
    $(window).scroll(function() { 
 

 
    if ($(window).scrollTop() > 300) { 
 
     $('nav').addClass('stick'); 
 
     $('nav').css('top', '0'); 
 
    } 
 

 
    if ($(window).scrollTop() < 300) { 
 
     $('nav').removeClass('stick'); 
 
     $('nav').css('top', '100%'); // my suggestion but doesn't work 
 
    } 
 

 
    }); 
 

 
});

header { 
 
    min-height: 100px; 
 
    width: 100%; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    min-height: inherit; 
 
    -webkit-transition: top 0.75s ease; 
 
    -moz-transition: top 0.75s ease; 
 
    -ms-transition: top 0.75s ease; 
 
    -o-transition: top 0.75s ease; 
 
    transition: top 0.75s ease; 
 
} 
 

 
nav.stick { 
 
    position: fixed; 
 
    min-height: 100px; 
 
    top: -100%; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav id="s-nav"> 
 
    ... 
 
    </nav> 
 
</header>

Ich muß es beginnt Off-Screen und Übergang NUR nach unten, wenn gescrollt> 300px (wenn .stick Klasse wird angewendet). Der Code funktioniert, aber wenn ich zurück blättern (wenn .stick Klasse entfernt wird), ist die Navigation immer noch außerhalb des Bildschirms.

Answer 1

Wenn ich Sie richtig verstehe, wollen Sie das Element wieder in der ursprünglichen Position, in der es begonnen hat, richtig? Wenn ja; versuche meine unten eingestellt;

$(document).ready(function() { 
 

 
    $(window).scroll(function() { 
 

 
    if ($(window).scrollTop() > 300) { 
 
     $('nav').addClass('stick'); 
 
     $('nav').css('top', '0'); 
 
    } 
 

 
    if ($(window).scrollTop() < 300) { 
 
     $('nav').removeClass('stick'); 
 
     $('nav').css('top', '0'); // try this. 
 
    } 
 

 
    }); 
 

 
});

header { 
 
    min-height: 100px; 
 
    width: 100%; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    min-height: inherit; 
 
    -webkit-transition: top 0.75s ease; 
 
    -moz-transition: top 0.75s ease; 
 
    -ms-transition: top 0.75s ease; 
 
    -o-transition: top 0.75s ease; 
 
    transition: top 0.75s ease; 
 
} 
 

 
nav.stick { 
 
    position: fixed; 
 
    min-height: 100px; 
 
    top: -100%; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav id="s-nav"> 
 
    ... 
 
    </nav> 
 
</header>