Ребят у меня есть сайт который не скролится , но у него есть елемент в котором весь контент , этот элемент скролится и имеет класс .main-child
Допустим у main-child есть ребенок #screen , который находится где то в средине
Проблема в том что мне нужно определить когда юзер доскролил до #screen , wow.js и ответы что то такого не помогают .
Т.е понять виден ли елемент или нет , если да то допустим вызвать алерт
<body><!--НЕ скролится!!!-->
<div class="global-wrap"><!--НЕ скролится!!!-->
<div class="main-container"><!--НЕ скролится!!!-->
<div class="main-child"><!--скролится!!!-->
<div id="screen1"></div><!--Елемент который находится неизвестно где и когда мы до него доскроливаем вызывается функция-->
</div>
</div>
</div>
</body>
Раз используете Jquery, пример будет с его использованием. Ловим на середине main-child:
$('.main-child').scroll(function(){
if ($('.some-block').position().top<=$('.parent').height()/2) alert('gotcha!!');
});
*,*:after,*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте не использовать*/
.parent{
height:500px;
border:2px solid #000;
overflow:hidden;
}
.main-child{
overflow-y:scroll;
max-height: 100%;
}
.some-block{
height:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="main-child">
Do nulla sunt occaecat laborum culpa aute in cupidatat occaecat dolore deserunt laborum sit nisi exercitation incididunt dolore aliqua fugiat dolore reprehenderit deserunt eu consectetur fugiat eu adipisicing adipisicing ad Lorem culpa dolore eu deserunt voluptate reprehenderit exercitation quis deserunt ex cupidatat incididunt enim in aliqua laboris Lorem nisi commodo excepteur nostrud aute consectetur qui eu aliqua eiusmod sint anim aliquip nostrud sit est occaecat voluptate aute duis deserunt irure ullamco ullamco officia ad voluptate duis mollit consequat duis tempor cupidatat nulla ullamco quis occaecat enim sint velit reprehenderit adipisicing dolor anim laborum officia exercitation laborum consequat ullamco labore reprehenderit deserunt velit sunt Lorem aliqua ut consequat ex ea sint sit consequat ut proident dolore esse anim nisi ut duis consectetur aute do culpa in culpa Lorem do labore pariatur cupidatat eiusmod eu culpa proident sint deserunt duis dolore reprehenderit elit nulla laboris dolor in reprehenderit est ipsum eu exercitation voluptate non Lorem anim amet commodo deserunt sunt Lorem commodo pariatur ad elit quis occaecat et nostrud duis cupidatat proident id nisi mollit enim ex enim ipsum dolor enim deserunt exercitation commodo anim labore officia excepteur non amet sunt ut esse esse sunt elit ullamco ad ea culpa do veniam laborum elit non proident velit eiusmod ut laborum Lorem excepteur incididunt dolore deserunt consequat aliquip velit labore aute qui do veniam in non occaecat qui pariatur amet in ipsum eu ad laborum enim est veniam ex cillum non excepteur id irure minim quis eiusmod tempor Lorem aute eiusmod aute consectetur eiusmod velit do minim deserunt proident ad nisi ullamco ad nostrud ad exercitation nulla consequat consectetur elit cillum esse excepteur ipsum sit labore veniam labore sint ullamco nisi esse enim sunt id adipisicing deserunt labore est consectetur fugiat deserunt proident ad nulla excepteur duis eiusmod amet aute laborum et amet ipsum et et anim nulla aliqua officia velit aute mollit nisi occaecat consectetur commodo laborum sit enim pariatur non est in dolor cillum culpa qui pariatur Lorem labore do duis aliquip esse minim in velit dolore esse magna qui incididunt irure duis adipisicing fugiat duis nostrud enim ea laborum aute deserunt non reprehenderit ut cupidatat anim ex cillum enim veniam incididunt sunt sit commodo culpa commodo fugiat nulla esse irure quis eiusmod ut commodo enim non est fugiat tempor sit amet cillum laboris exercitation aute ad qui ex amet reprehenderit adipisicing nisi mollit culpa ullamco esse officia sunt cillum excepteur deserunt officia eiusmod aliqua ipsum ex fugiat laborum nulla sint et et culpa ullamco pariatur nulla ullamco tempor laboris consectetur nostrud consectetur mollit laborum mollit sint anim mollit dolor amet nostrud enim ex amet ex reprehenderit enim culpa ea fugiat tempor elit fugiat culpa sunt ipsum sint exercitation nulla deserunt Lorem Lorem magna labore exercitation enim in duis velit anim id anim veniam dolor anim dolore ad minim quis irure aliqua fugiat velit aliquip occaecat elit minim adipisicing Lorem velit reprehenderit mollit velit aute magna et cupidatat pariatur labore do deserunt commodo in minim veniam exercitation sunt eiusmod do laboris quis est minim consectetur occaecat magna mollit ullamco minim eiusmod sit voluptate anim aute culpa amet officia consequat velit ex nisi occaecat irure ad cillum culpa proident id reprehenderit occaecat qui cillum est aliquip aliqua commodo dolore Lorem quis Lorem sint nisi consectetur do do anim aliquip nulla adipisicing ex et esse anim enim esse dolor reprehenderit fugiat sit magna ex est do amet Lorem minim fugiat officia dolor aliquip sit pariatur qui veniam ad anim eiusmod anim est aute enim ut aute minim elit amet fugiat occaecat occaecat anim enim adipisicing deserunt laboris ea sunt cillum elit enim ut Lorem sint et sint elit do deserunt ea cupidatat aliqua enim laborum esse reprehenderit cillum dolor nisi nostrud cupidatat proident aliqua esse voluptate quis esse cupidatat ad voluptate labore anim sit nostrud esse officia magna mollit laboris aliquip proident amet mollit quis esse qui sit reprehenderit incididunt elit ad deserunt ut Lorem irure et consectetur commodo pariatur est labore consequat Lorem aute commodo aute officia do labore anim exercitation dolore et sint voluptate duis magna eu voluptate ipsum eu sunt occaecat proident Lorem enim consequat incididunt laborum sit nulla aliqua magna
<div class="some-block"></div>reprehenderit veniam officia et irure nisi ea cillum et exercitation culpa occaecat consequat magna amet fugiat ut laborum deserunt nisi do in sunt et sit dolore consectetur esse duis laborum ea amet duis ut eu mollit pariatur laborum pariatur cupidatat excepteur id nulla nisi esse anim aliquip pariatur do non ex dolore nulla dolor voluptate reprehenderit quis esse mollit ea ipsum exercitation sint est nulla ex ut magna nostrud anim in ea id do irure esse ex enim elit esse qui non ex sunt nisi irure sint qui dolore excepteur sunt velit incididunt ad veniam sunt labore mollit duis tempor ex exercitation laborum adipisicing cupidatat qui aliquip duis consectetur nostrud in velit ullamco qui consectetur consequat enim fugiat excepteur ipsum sunt nisi fugiat tempor eu ullamco aliqua pariatur consectetur proident tempor cupidatat exercitation adipisicing cupidatat id fugiat proident ex magna sint nulla deserunt ad dolor sit dolor est duis aute qui aliqua officia amet excepteur minim fugiat deserunt sit adipisicing ad veniam tempor sunt dolor do sint exercitation in velit anim ea duis occaecat aliquip exercitation ex eiusmod dolor sint dolor quis reprehenderit quis in anim sint irure aute esse duis aliquip dolore fugiat minim adipisicing elit exercitation dolore consectetur adipisicing magna cillum nisi nulla esse est id ad elit tempor dolor ex laboris Lorem do eiusmod mollit ipsum nisi officia laborum tempor dolore eiusmod ad nostrud ex duis reprehenderit pariatur ex cillum esse reprehenderit in irure occaecat qui commodo aliquip sit proident amet officia nulla non exercitation ipsum eu mollit voluptate minim cillum incididunt velit est culpa esse nisi exercitation fugiat esse id nulla est mollit duis voluptate quis incididunt laborum non cupidatat ad Lorem do non qui ipsum fugiat dolor consectetur excepteur irure sunt proident anim do fugiat sunt nulla ad nulla nulla quis sit sit ut mollit ut magna aute excepteur fugiat elit laborum ea cillum.
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть выпадающий список с ссылками на модели кроватей (вынесется на отдельную страницу),как сделать для всех страниц сайта 1 выпадающий список...
Слайдер не слушает команды, вместо одного слайда отображает все и сразу, не ясно как задает ширину, не могу найти причинуЗаранее благодарен...
Стилями не получается выровнять по центру! Подскажите решение на JS
Суть проблемы: при нажатии на кнопку на сайте должно происходить копирование какой-либо информации, которая располагается где-либо на сайте,...