固定位置が適用されるときの遷移div

Question

ユーザーがスクロールするときに.stickクラスを＃s-navに適用する次のコードがあります。

$(document).ready(function() { 

$(window).scroll(function() { 
    if ($(window).scrollTop() > 300) { 
    $('#s-nav').addClass('stick'); 
    $('#s-nav_placeholder').css({display: 'block'}); 
    } 
    if ($(window).scrollTop() < 300) { 
    $('#s-nav').removeClass('stick'); 
    $('#s-nav_placeholder').css({display: 'none'}); 
    } 
}); 

}); 

CSS .stickクラスは、私はそれが上から下に移行したい適用されます

#s-nav { 
    height: 70px; 
    width: 100%; 
    position: relative; 
    -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; 
} 

#s-nav_placeholder { 
    height: 70px; 
    width: 100%; 
    display: none; 
} 

#s-nav.stick { 
    position: fixed; 
    top: 0; left: 0; right: 0; 
    z-index: 999; 
} 

。問題は私がコンテンツの一部になってから画面のdivを「開始」する方法を知らないことです<トップから300 px

Answer 1

これを試してください。

#s-nav.stick { 
    position: fixed; 
    top: -100%; left: 0; right: 0; 
    z-index: 999;  
-webkit-transition: 0.75s ; 
-moz-transition:  0.75s ; 
-ms-transition:  0.75s ; 
-o-transition:  0.75s ; 
transition:   0.75s ; 
} 

にCSSを変更 、このような$('#s-nav').css('top','0');を追加します。

$(document).ready(function() { 

$(window).scroll(function() { 
    if ($(window).scrollTop() > 300) { 
    $('#s-nav').addClass('stick'); 

    /*new line of code */ 
    $('#s-nav').css('top','0'); 

    $('#s-nav_placeholder').css({display: 'block'}); 
    } 
    if ($(window).scrollTop() < 300) { 
    $('#s-nav').removeClass('stick'); 

    /*new line of code */   
    $('#s-nav').css('top','-50%'); 

    $('#s-nav_placeholder').css({display: 'none'}); 
    } 
}); 

}); 

チェックこのjsfiddle：クールhttps://jsfiddle.net/jayakrishnancn/61s0oLLs/1/