Как скрыть элемент, когда присутствует определенный div?

Question

Я хочу скрыть свою залипшую кнопку, когда ползунок или нижний колонтитул отображается при прокрутке.

Я попробовал этот код:

$(window).scroll(function() {
    if ($(this).scrollTop() < 250) { 
        $("#sticky-button").css({
            'display': 'none'
        });
    }
});

Так что это значит, чтобы скрытьмоя липкая кнопка, когда она ниже высоты прокрутки 250px.

Но на мобильном телефоне, я понимаю, что она не работает, так как 250px на мобильном телефоне - довольно большая высота.

Так как это сделать,заставить его работать с определенным div (например: #slider, #footer) вместо установки этой высоты 250?

Answer 1

Вы должны проверить элемент на его позицию, используя .offset().top

$(window).scroll(function() {
        var elemOffsetTop = $('#slider').offset().top;
        if ($(this).scrollTop() > elemOffsetTop ) { 
            $("#sticky-button").css({
                'display': 'none'
            });
        }else{
          $("#sticky-button").css({
                'display': 'block'
            });
        }
        
    });

#sticky-button{
  position: fixed;
  top:0;
  left:0;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.section{
  width: 100%;
  height: 200px;
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-button"></div>
<div class="section"></div>
<div class="section"></div>
<div id="slider" class="section">slider</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>