css/jquery scroll-fixed div issues

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 хорошо работает. The else ветка проблема, думаю.

Эта ветка является испытанием для эксперимента по прецеденту. else ветвь работает с известной высотой в px, но не со смещением, которое часто изменяется.

Также я не знаю, почему, когда окно прокручивается вниз до div, верхнее значение позиции устанавливается на 40 пикселей.

Благодаря

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" 
      }); 
     } 
    });