Now the code is:

function aboutUsAmination() { $(window).scroll(function () { var aboutUs = $('.about_us'); var top = $(aboutUs).offset().top; var scrollFromTop = $(window).scrollTop(); if (scrollFromTop >= top) { console.log("Hello") } }); };

A message is displayed in the console when we are directly crushed to the block (that is, it is at the very top of the screen). I need that at least when it is in the middle of the screen. You can calculate the exact number and take it away from top, but it will have to be taken for each screen resolution.
And so: How to display a message in the console when the block is vertically centered, not at the top

  • We put it like this: var top = $ (aboutUs) .offset (). Top / 2; - NeedHate
  • @NeedHate did not quite solve the problem, but thanks - Nikita Shchypylov

1 answer 1

To do this, adjust the scrollFromTop to half the height of the window, and top to half the height of the block:

 function aboutUsAmination() { $(window).scroll(function () { var aboutUs = $('.about_us'); var top = $block.offset().top + $block.outerHeight() / 2; var scrollFromTop = $(window).scrollTop() + $(window).height() / 2; if (scrollFromTop >= top) { console.log("Hello") } }); };

With this option - the message in the console, you will see when the middle of the block will be vertically in the middle, or higher.

Jsfiddle working example

  • Thanks for the answer. Stopped at this option if (scrollFromTop> = (top - aboutUs.height () / 2)) { - Nikita Shchypylov
  • It will be even better to combine them. scrollFromTop half the height of the screen, and add half the height of the block to top . Then the script will work when the middle of the block passes through the middle of the screen - which will make the script, within reasonable limits, universal for different screen resolutions, and for different block heights. - Vitaliy Emelyantsev
  • Now I will try this mixture) - Nikita Shchypylov
  • var scrollFromTop = $ (window) .scrollTop () - $ (window) .height () / 2; if (scrollFromTop> = (top + aboutUs.height () / 2)) {That didn't work. The script is triggered when we have reached half the entire page - Nikita Shchypylov
  • Yes, you are right - I confused the sign, in both cases there should be an addition. Completed the answer and attached a link to jsfiddle - Vitaly Emelyantsev