Как узнать, что пользователь достиг этих элементов

282
31 декабря 2017, 08:57

В теории это дело должно менять содержимое #title на название болка, который сейчас в поле зрения. Но ничего не происходит. В консоли никаких ошибок нет, но со своей задачей код совершенно не справляется. Знаю, что тут полно костылей, пока по-другому не умею.

$(window).scroll(function(){
  /* elements */
  var $introducion = $("#introducion"),
  $photo = $("#photo"),
  $projects = $("#projects"),
  $news = $("#news"),
  /* elements positions */
  $introducionPos = $introducion.offset().tot,
  $photoPos = $photo.offset().tot,
  $projectsPos = $projects.offset().tot,
  $newsPos = $news.offset().tot,
  /* window heignt */
  $winHeight = $(window).height(),
  /* distances to elements */
  $scrollToIntroducion = $introducionPos - $winHeight,
  $scrollToPhoto = $photoPos - $winHeight,
  $scrollToProjects = $projectsPos - $winHeight,
  $scrollToNews = $newsPos - $winHeight;
  /* checking */
  $(window).scroll(function(){
    var $winScrollTop = $(this).scrollTop();
    if($winScrollTop > $scrollToIntroducion){
      $("#title").text("Introducion");
    }
    else if($winScrollTop > $scrollToPhoto){
      $("#title").text("Galery");
    }
    else if($winScrollTop > $scrollToProjects){
      $("#title").text("Projects");
    }
    else if($winScrollTop > $scrollToNews){
      $("#title").text("News");
    }
  });
});

Вот вся разметка:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height,width=device-width">   
<title>My site</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="logo">
   <ul>
    <li id="logoc">
        <h1 id="logo"></h1>
    </li>
    <li id="name">
        <h1 id="title"></h1>
    </li>
    <li>
        <a href="https://galactikka.com/146568">
            <img src="galactikka.svg" alt="">
        </a>
    </li>
    <li>
    <a href="https://vk.com/dm1tr1y147">
        <i class="fa fa-vk" aria-hidden="true"></i>
    </a>
    </li>
    <li>
        <a href="https://www.instagram.com/ourwildworldpictures/">
            <i class="fa fa-instagram" aria-hidden="true"></i>
        </a>
    </li>
    <li>
        <a href="https://ficbook.net/authors/2549589">
            <img src="ficbook.svg" alt="">
        </a>
    </li>
    </ul>
</header>
<!-- 
    INTRODUCION
 -->
<section id="introducion">
    <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p>
</section>
<!-- 
    GALERY
 -->
<a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a>
<section id="photo">
    <div id="exp">
        <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt="">
        <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt="">
        <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt="">
        <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt="">
        <!-- 
            JQUERY
        -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- 
            IMG RESIZER
        -->
        <script type="text/javascript">
            $(document).ready(function(){
                $('.galery').height($('.galery').width());
                $(window).resize(function(){
                    $('.galery').height($('.galery').width());
                });
            });
        </script>
        <script type="text/javascript">
            $(".galery").hover(function() {
                $("#more").css;
            });
        </script>
    </div>
</section>
<!-- 
    PROJECTS
 -->
<section id="projects">
    <div class="exs" id="first">
        <h2>Q.Noter</h2>
        <img class="exsi" src="clipboard1.svg" alt="Screenshot">
    </div>
    <div class="exs" id="second">
        <h2>Later</h2>
        <img class="exsi" src="Flag_of_None.svg" alt="">
    </div>
    <div class="exs" id="third">
        <h2>Later</h2>
        <img class="exsi" src="Flag_of_None.svg" alt="">
    </div>
    <!-- 
        IMG RESIZER
     -->
    <script type="text/javascript">
            $(function(){
                $('.exsi').height($('.exsi').width());
                $(window).resize(function(){
                    $('.exsi').height($('.exsi').width());
                });
            });
        </script>
</section>
<!-- 
    NEWS
 -->
<section id="news">
    <div>
        <h2>Hello</h2>
        <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p>
    </div>
    <div>
        <h2>Hello</h2>
        <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt="">
        <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p>
    </div>
    <div>
        <h2>Hello</h2>
        <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt="">
        <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p>
    </div>
    <div>
        <h2>Hello</h2>
        <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt="">
        <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p>
    </div>
    <!-- 
        IMG RESIZER
     -->
    <script type="text/javascript">
            $(function(){
                $('.exni').height($('.exni').width());
                $(window).resize(function(){
                    $('.exni').height($('.exni').width());
                });
            });
        </script>
</section>
<!-- 
    TITLE TRIGGER
 -->
<script type="text/javascript">
        /* elements */
        var /*$introducion = $("#introducion"),*/
        $photo = $("#photo"),
        $projects = $("#projects"),
        $news = $("#news"),
        /* elements positions */
        /*$introducionPos = $introducion.offset().tot,*/
        $photoPos = $photo.offset().tot,
        $projectsPos = $projects.offset().tot,
        $newsPos = $news.offset().tot,
        /* window heignt */
        $winHeight = $(window).height(),
        /* distances to elements */
        /*$scrollToIntroducion = $introducionPos - $winHeight,*/
        $scrollToPhoto = $photoPos - $winHeight,
        $scrollToProjects = $projectsPos - $winHeight,
        $scrollToNews = $newsPos - $winHeight;
        /* checking */
        $(window).scroll(function(){
            var $winScrollTop = $(this).scrollTop();
            /*if($winScrollTop > $scrollToIntroducion){
                $("#title").text("Introducion");
            }*/
            if($winScrollTop > $scrollToPhoto){
                $("#title").text("Galery");
            }
            else if($winScrollTop > $scrollToProjects){
                $("#title").text("Projects");
            }
            else if($winScrollTop > $scrollToNews){
                $("#title").text("News");
            }
        });
</script>

Answer 1

var $fx_height = $('.fx-height'),  
    wh = $(window).height(), 
    step = 100, // отвечает за нижнюю границу диапазона, в котором должен оказаться элемент своей верхней левой точкой (offset), что бы передался его контент (в данном случае значение id) 
                // данное значение не должно быть больше высоты блока из набора $fx_height 
$title = $('#title'); 
 
$(document).scroll(function() { 
    $fx_height.each(function() { 
        if(($(this).offset().top - $(document).scrollTop()) > 0 && ($(this).offset().top - $(document).scrollTop()) < step) { 
            $title.html('now is on view: ' + $(this).attr('id')); 
        } 
    }) 
     
}) 
 
$(document).trigger('scroll');
#title{ 
    position:fixed; 
    width:100%; 
    text-align:center; 
} 
.fx-height{height:400px} 
#introducion{background-color:lightgreen} 
#gallery{background-color:lightblue} 
#projects{background-color:lightyellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1 id="title">now on view</h1> 
<div id="blocks"> 
    <div id="introducion" class="fx-height">introducion block</div> 
    <div id="gallery" class="fx-height">gallery block</div> 
    <div id="projects" class="fx-height">projects block</div> 
</div>

Answer 2

Уберите внутреннюю обертку 

$(window).scroll(function(){
  ...
});

вокруг if-elseов. Код уже находится в обработчике события scroll

Update

Чего-то не понял

Ваш код выглядит так:

$(window).scroll(function(){
  ...
  $(window).scroll(function(){
  ...
  });
});

Что это делает:

  • сначала внешний $(window).scroll(function(){ навешивает обработчик на событие scroll,
  • потом на каждое событие scroll этот внешний обработчик добавляет еще один обработчик - код внутри внутреннего $(window).scroll(function(){ (и еще, и еще, и еще).

Update

даже после того, как убрал, ничего не происходит

Вы же не показали Вашу разметку. Может у Вас логика if-else неправильная.

Update

Разверните условия в if-else от нижнего элемента к верхнему.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как вы создаете спрайты на Webpack?
javascript

Как вы создаете спрайты на Webpack?

Всем привет, как вы генерируете спрайты на webpack ? Какие плагины используете ?

 221
PHP Вывод рандомных чисел и сортировка
PHP

PHP Вывод рандомных чисел и сортировка

$m = 3; // Кол-во строк $n = 5; // Кол-во чисел в строке Нужно сделать генерацию рандомных чисел и их сортировку

 517
Как добавить минуты к дате?
PHP

Как добавить минуты к дате?

Секунды можно добавить вот так:

 286
mt_rand выходит за заданный диапазон
PHP

mt_rand выходит за заданный диапазон

Собственно вызываю $CardCookie = mt_rand(6103006430040008016, 6103006430040020000); , на выходе при генерации некоторых карт вылезает за указанный диапазон, замечено...

 207