2016-04-09 10 views
0

私は折りたたみ式のナビゲーション(その高さは分かりません)とその下のdivを持っています。その下にスクロールするとpositionからfixedに変わります。divを下にスクロールしたときにdivを修正しました

私はこれを達成しましたが、一番上にスクロールすると、divは固定されたままになりました。最初はどこにあったのか分かりません。static正確なポイントはです。

ここではフィドルです(私のコメントは私の解説です):https://jsfiddle.net/1krLnv7q/2/

私は何か助けてくれますか?ハマった。

+1

'ポジションのような音:sticky'はこれを行うことができます。それはfirefoxによってのみサポートされていることは残念です。 –

+1

このようなものは 'scrollmagic'のピン止め機能で行うことができます。 http://scrollmagic.io/とhttp://scrollmagic.io/examples/basic/simple_pinning.htmlの例を参照してください。 – Johannes

+0

私は 'position:sticky'を試しましたが、そのサポートのためにjQuery機能にswitechしました。 – jstorm31

答えて

1

EDIT

あなたはそれ以外の場合は、バギーのアニメーションが発生します、scroll()イベントの外であなたのVARSを定義することができます。

Like this

$(function(){ 
    //top offset of static/fixed div 
    var staticOffset = $('.static').offset().top; 
    //window height 
    var wpHeight = $(window).height(); 

    //point when the user scrolls at the bottom of div 
    //static/fixed div height + top offset - viewport height 
    var treshold = staticOffset + $('.static').height() - wpHeight; 

    $(window).scroll(function(){ 
    //if user scrolls below the divs bottom (treshold) it becomes fixed 
    if ($(window).scrollTop() > treshold){ 
     $('.static').addClass('fix');  
    }else{ 
     $('.static').removeClass('fix');  
    } 
    }); 
}); 
+0

ありがとう、そんな初歩的な間違い。 :( – jstorm31

関連する問題