刪除課程後，導航無法返回到原始位置

Question

該代碼控制着我的導航。在滾動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>

我需要它開始屏幕和過渡下來，只有當滾動> 300像素（與內容< 300像素滾動）（當.stick向上轉變關閉屏幕類被應用）。代碼有效，但是當我向後滾動（當.stick類被移除時）導航仍然在屏幕外。

Answer 1

如果我正確地理解了你，你想要元素回到原來的位置，它開始的權利？如果是這樣;嘗試下面的調整;

$(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>