Переопределение скрытия блока при скролле

Question

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

 $(document).ready(function () {
        // ===webazex start
        function toggleHeader() {
            if ($(this).scrollTop() > 10) {
                $('.mobile__content-bottom').hide(300);
            } else {
                $('.mobile__content-bottom').show(300);
            }
        }
        $(window).on('load resize scroll',toggleHeader);
        $('.box__toogle-menu-container').click(function () {
            $('.mobile__content-bottom').show(300);
        });

А вот так я пробовал сделать скрытие блока конткретно при событии скролла а не при скролле на столько-то пикселей:

 function toggleHeader() {
            if ($(this).scrollTop() < 10) {
                $('.mobile__content-bottom').show(300);
            } else {
                $('.mobile__content-bottom').hide(300);
            }
        }

Срабатывание обеих вариантов настроено на эти события

$(window).on('load resize scroll',toggleHeader);

Появление сделано так:

$('.box__toogle-menu-container').click(function () {
            $('.mobile__content-bottom').show(300);
        });

По факту при клике на кнопку показать - он показывается и сразу скрывается, так как срабатывает условие в функции. Как мне можно переопределять это условие и показывать блок, или же сделать так чтобы блок скрывался не при скролле на столько то элементов а просто при скролле, так даже правильнее будет.

Answer 1

Нужно использовать два дополнительных "перекрывающих друг-друга" css класcа. При нажатии на кнопку "динамически" создавать еще один обработчик на resize/scroll, но который выполняется единожды (заметьте, используется one вместо on).

$(function() {

  function onScroll() {
    if ($(this).scrollTop() > 10) {
      $('.fx').addClass('inactive');
    } else {
      $('.fx').removeClass('inactive');
    }
  }

  function onClick() {
    $('.fx').addClass('active');
    $(window).one('resize scroll', function() {
      $('.fx').removeClass('active');
    });
  }

  $(window).on('resize scroll', onScroll);
  $('.btn').on('click', onClick);

  onScroll();
        
});

.fx {
  position: fixed;
  top: 0; right: 0; left: 0;
  background-color: yellow;
  transition: visibility ease 300ms, opacity ease 300ms;
  padding: 10px;
  visibility: visible;
  opacity: 1;
}
.fx.inactive {
  visibility: hidden;
  opacity: 0;
}
.fx.active {
  visibility: visible;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fx">HEADER</div>

<br><br><br><br><br><br><br><br>

<button class="btn">Click me</button>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<button class="btn">Click me</button>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

Answer 2

В общем проблема оказалась проста как гусь. При скролле блок скрывался, а при появлении инициировал скролл на пару пикселей попричине position: relative;, из за чего опять срабатывал скрипт его скрывающий, и так он циклился. По факту нужно было дать блоку position: absolute;

БЛОГ НА HUSL

Переопределение скрытия блока при скролле

Ответы (2 шт):