Как доработать скрипт прокрутки страницы?

Question

[Иван Медведев]

Доброго времени всем!
Я тут написал скрипт, который доводит нужные мне блоки страницы до верха браузера. То есть, когда юзер скролит страницу и как только внизу окна появляется верх определенного блок, скрипт подхватывает его и доскроливает до верха окна. Подскажите, как доработать скрипт, чтобы он не подхватывал блок сразу а дал его проскролить где-то на треть или половину окна браузера?

Сайт тут: body-effekt.com
Скрипт ниже:

( function( $ ) {
var $element = $('.section-shop');
var $element2 = $('.section-quantity');
var $element3 = $('.section-effect');
let counter = 0;
let counter2 = 0;

$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();

  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();

  //Если скролл до начала елемента
  var offset = $element.offset().top
  var offset2 = $element2.offset().top
  var offset3 = $element3.offset().top
// console.log(offset3);
// console.log(scroll);

  if (scroll < offset2 && counter2 == 1) {
// console.log(offset3);
counter2 = 0;
counter = 0;
$(window).on('touchmove mousewheel');

  }
  if (scroll > offset2 && counter2 == 0) {
  	$(window).off('touchmove mousewheel');
var $page = $('html, body');
     $page.animate({

        scrollTop: $('.section-quantity').offset().top
    }, 500, function(){
    // $(window).on('DOMMouseScroll mousewheel',test);
     $(window).on('touchmove mousewheel');
       
    });
    counter2 = 1;

  }
    

  if (scroll > offset && counter == 0) {
    	$(window).off('touchmove mousewheel');
   var $page = $('html, body');
     $page.animate({

        scrollTop: $('.section-shop').offset().top
    }, 500, function(){
       $(window).on('touchmove mousewheel');
      
    });
    counter = 1;
  }
});
}( jQuery ) );

Comments

[Александр]

Scroll Snap не устраивает?

[Иван Медведев]

Александр, нет, так как его актуально использовать для всех блоков, и он влияет на анимацию блоков

Answer 1

[Lukmann]

а зачем в переменной scroll вы добавили прокрутку + высоту страницы?

window.addEventListener('scroll', scrollAnimation);
//Вот сюда вместо scroll__elem вы ставите свои элементы//
  let scrollElements = document.querySelectorAll('.scroll__elem');
  let clientHeight = document.documentElement.clientHeight;
  function scrollAnimation(){
     for(let i = 0;i<scrollElements.length;i++){
//Вот сюда ставишь при скольки показании элемента будет срабатывать функция//
        let plus = clientHeight  / 2;
        let plusResult = clientHeight - plus;
        if (plusResult >= scrollElements[i].getBoundingClientRect().top) {
//Вот здесь сама функция//
          scrollElements[i].classList.add('anim');
        }
      }
  }