要素のトップアトリビュートをjqueryで配置する

Question

レスポンシブなナビゲーションハンバーガーを配置しようとすると厄介な問題が発生します。私はハンバーガーを作成し、絶対的な位置を使用する応答メニューと呼ばれるプラグインを使用しています。

私はいつもヘッダーの中央にハンバーガーを配置しようとしています。 これを達成するために、私は次のjQueryコードを使用しています。

しかし、私が持っている問題は、ハンバーガーが表示され、ページを下にスクロールしてすぐにページの上部にスクロールすることです。ハンバーガーはヘッダーの中央に位置しません。ジャンプするには少し下にスクロールバックする必要があります。

私はこれをしてください修正することができますどのように任意のアイデア...それは狂気私を運転だと私は非常によくjqueryのを知らない:(

は、事前に何かアドバイスをありがとう:)

Link to the site in question

を

$(window).on("load resize scroll", function(e){ 
    var headerHeight = $('nav').height()/2; 
    var iconHeight = $('#click-menu').height()/2; 
    var total = headerHeight - iconHeight; 
    if ($(window).scrollTop() >= 1) { 
    $('#click-menu').css('top', total); 
    } 
    else { 
     $('#click-menu').css('top', total); 
    } 
}); 

Answer 1

私はこれをテストして確認することは難しいのですが、私はそれはそれは$('nav').height()/2;の評価がすぐに起こるが、ヘッダは300ミリ秒にわたりサイズにアニメーション化しているため、トップが当たったときの位置がオフになっていた理由を考えています。

は少しハックが、私はそれは、アイコン、ビットグリッチそのルックスを調整する前に300msのために遅延することがあるので、あなたが setTimeout

function setNavTop(){ 
    var headerHeight = $('nav').height()/2; 
    var iconHeight = $('#click-menu').height()/2; 
    var total = headerHeight - iconHeight; 
    $('#click-menu').css('top', total); 
} 

$(window).on("load resize scroll", function(e){ 

    if ($(window).scrollTop() >= 1) { 
     setNavTop(); 
    } 
    else { 
     setTimeout(setNavTop, 300); // wait for header to animate to size. 
    } 
}); 

を追加することで問題を解決することができると思います。これを改善するには、setTimeoutのトゥイーンを追加します。最もエレガントではありませんが、それは動作します

setNavTop(); 
setTimeout(setNavTop, 100); 
setTimeout(setNavTop, 200); 
setTimeout(setNavTop, 300);