Скрыть блок в зависимости от скрола

Question

На сайте имеется плавающая кнопка, при нажатии появляется форма, можно ли как-то сделать если пользователь проскролил страницу на 30% эта форма скрылась?

То есть ее в любом месте можно открыть и если прокрутить страницу форма сама скроется.

Answer 1

Обновил свой ответ, отталкиваясь от Вашего примера на CodePen:

$(".header__top span").on("click", function() {
  $(".header__bottom").slideToggle(100)
})

window.addEventListener("scroll", event => {
  const height = document.body.clientHeight
  const top = document.body.scrollTop
  const header_bottom = document.querySelector(".header__bottom")
  if (top > Math.round(height * (1 / 100) * 30)) {
    if (header_bottom.style.display === "block") {
      header_bottom.style.display = "none"
    }
  }
})

.header {
  position: fixed;
  top: 0;
  width: 400px;
  background: blue;
  color: #fff;
}

.header__bottom {
  display: none;
}

.wrapper {
  height: 10000px;
  width: 400px;
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    <div class="header__top">
      <span>Открыть поиск</span>
    </div>
    <div class="header__bottom">
      <form action="/"><input type=""><button>искать</button></form>
    </div>
  </div>
</div>

Имейте ввиду, что поскольку постоянные реакция на событие "scroll" очень затратны для браузеров Вам нужно будет использовать debounce что бы не допустить просадки производительности Вашей(го) страницы(приложения).

Answer 2

Вариант на jQuery

let hide = 30; // если позиция скролла >30% от всей страницы - то элемент будет скрыт
hide = ($(document).height() - $(window).height()) / 100 * hide;
let isHide = $(window).scrollTop() >= hide ? true : false; // "оптимизация" от лишних просчётов.

$(window).on({
  'scroll': function(){
    if($(this).scrollTop() >= hide && isHide === false) {
      isHide = true;
      $('.form').fadeOut(500);
    } else if($(this).scrollTop() < hide && isHide === true) {
      isHide = false;
      $('.form').fadeIn(500);
    }
  },
  'resize': function(){
    hide = ($(document).height() - $(window).height()) / 100 * hide;
  }
});

body {
  height: 1000px;
}

.form {
  display: block;
  width: 250px;
  height: 100px;
  background: blue;
  color: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
}

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

<div class="form">
  Ваша форма
</div>

Подумав предумал такой вариант, закрывается после того, как пользователь проскроллил расстояние >30% от высоты экрана.

let isHide = false,
    curS = [],
    winH = Math.round($(window).height() / 100 * 30);

$('.header__top span').on('click', function() {
  $('.header__bottom').slideToggle(100);
  curS[0] = $(window).scrollTop() - winH;
  curS[1] = $(window).scrollTop() + winH;
  isHide = true;
});

$(window).on({
  'scroll': function(){
    if(isHide === true && ($(window).scrollTop() >= curS[1] || $(window).scrollTop() <= curS[0])) {
      isHide = false;
      $('.header__bottom').slideUp(100);
    }
  },
  'resize': function(){
    winH = Math.round($(window).height() / 100 * 30);
  }
});

body {
  height: 2000px;
}

.header {
  position: fixed;
  top: 0;
  width: 400px;
  background: blue;
  color: #fff;
}

.header__bottom {
  display: none;
}

.wrapper {
  height: 10000px;
  width: 400px;
  border: 1px solid
}

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

<div class="wrapper">
  <div class="header">
    <div class="header__top">
      <span>Открыть поиск</span>
    </div>
    <div class="header__bottom">
      <form action="/"><input type=""><button>искать</button></form>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Скрыть блок в зависимости от скрола

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