css/jquery scroll-fixed div問題

Question

我試圖在窗口的瀏覽器向下滾動時以及在窗口向上滾動時將某個像素固定在一個像素後，將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" 
      }); 
     } 
    });