JQuery div с постепенным исчезновением в зависимости от высоты div

Question

У меня есть div, который я показываю на странице после 800 px. Проблема в том, что люди жалуются, так как это блокирует просмотр в мобильном телефоне. Я нажимаю кнопку закрытия, но она снова появляется. Как сделать событие закрытия onclick окончательным?

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

body {
  height: 5000px;
}

.bottomMenu {
  display: none;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bottomMenu' id='myDiv1'>
  <button class='close' id='close' onclick='document.getElementById(&apos;myDiv1&apos;).style.display=&apos;none&apos;'>CLOSE X</button>
</div>
</div>

Answer 1

Используя переменную, которая сообщает, была ли кнопка закрыта или нет, это путь к go!

Посмотрите на следующий код:

 let closed = false;
    function onClose(){
        closed = true;
        $('.bottomMenu').fadeOut();
    }

    function resetButtonVisibility(yPosition){
        if(yPosition<800){
            closed = false;
        }
    }

    $(document).scroll(function() {
        var y = $(this).scrollTop();

        if (y > 800 && !closed) {
            $('.bottomMenu').fadeIn();
        } else {
            $('.bottomMenu').fadeOut();
        }

        //if you want the button to appear again 
        resetButtonVisibility(y);
    });

body {
    height: 5000px;
  }
  
  .bottomMenu {
    display: none;
    position: fixed;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class='bottomMenu' id='myDiv1'>
        <button class='close' id='close' onclick='onClose()'>CLOSE X</button>
    </div>

Основные изменения заключались в создании функции, которая устанавливает для переменной closed значение false, и она вызывается событием onClick, присутствующим в кнопке. , Кроме того, я добавил функцию, которая сбрасывает поведение, когда пользователь снова прокручивает вверх и вниз, на случай, если вы хотите, чтобы кнопка снова появилась.

Answer 2

Первоначальная проблема связана с вашей функцией прокрутки. Неважно, скрыто ли меню или нет, вы добавляете его в меню до тех пор, пока условие if истинно, поэтому оно появится снова.

Вот несколько простых примеров того, как вы можете это исправить. Я удалил ваш встроенный обработчик кликов в jquery,

1. используйте флаг, чтобы указать, что меню должно быть закрыто

// these should be inside of doc ready which means your isCLosed is not a global var

var isClosed = false;
var $bottomMenu = $('.bottomMenu');

$(document).scroll(function() {
  var y = $(this).scrollTop();

  // only execute if it is not closed already
  if (!isClosed) {
    if (y > 800) {
      $bottomMenu.fadeIn();
    } else {
      $bottomMenu.fadeOut();
    }
  }

});

$("#close").on('click', function() {
  isClosed = true;
  $bottomMenu.fadeOut();
});

body {
  height: 5000px;
}

.bottomMenu {
  display: none;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bottomMenu' id='myDiv1'>
  <button class='close' id='close'>CLOSE X</button>
</div>

2. Отменить привязку прокрутки после закрытия

Вы также можете полностью отменить привязку прокрутки, если у вас есть только одна функция прокрутки

$(document).scroll(function() {
  var y = $(this).scrollTop();

  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }

});

$("#close").on('click', function() {
  $('.bottomMenu').fadeOut();
  $(document).off("scroll");
});

body {
  height: 5000px;
}

.bottomMenu {
  display: none;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bottomMenu' id='myDiv1'>
  <button class='close' id='close'>CLOSE X</button>
</div>