css/jqueryスクロール固定div問題

Question

私は、ウィンドウのブラウザがスクロールアップしたときにウィンドウのブラウザがスクロールしたときに、特定のピクセルの後にdivを修正しようとしていますが、先頭に同じ位置にdivを配置します。

$(window).scroll(function() { 
    var button = $('.button-mobile'); 
    offset = button.offset().top; 
    position = button.position().top; 
    console.log(position); 
    if ($(this).scrollTop() >= offset) { 
     $('.button-mobile').css({ 
      "max-height": "100%", 
      "position": "fixed", 
      "overflow-y": "auto", 
      "top": "40px", 
      "z-index": "1" 
     }); 
    } else { 
     $('.button-mobile').css({ 
      "position": "absolute", 
      "top": "none", 
      "overflow-y": "none", 
      "z-index": "none" 
     }); 
    } 
}); 

ifブランチがうまく機能します。 elseブランチが問題だと思います。

このブランチは先行する実験のテストです。 elseブランチはpxで既知の高さで動作しますが、頻繁に変化するオフセットでは機能しません。

また、ウィンドウがdivにスクロールして位置のトップ値が40pxに設定されている理由もわかりません。

おかげ

Answer 1

私はあなたがボタンとスクロールコールバックの外に割り当てをオフセット移動する必要がありますと仮定します。

var button = $('.button-mobile'); 
    var offset = button.offset().top; 

    $(window).scroll(function() { 
     position = button.position().top; 
     console.log(position); 
     if ($(this).scrollTop() >= offset) { 
      $('.button-mobile').css({ 
       "max-height": "100%", 
       "position": "fixed", 
       "overflow-y": "auto", 
       "top": "40px", 
       "z-index": "1" 
      }); 
     } else { 
      $('.button-mobile').css({ 
       "position": "static", 
       "top": "none", 
       "overflow-y": "none", 
       "z-index": "none" 
      }); 
     } 
    });