Отследить прокрутку

192

28 августа 2018, 12:20

мне необходимо отследить на каком из section я нахожусь. То есть вот долистал я до 3 section и мне надо получить id Думал this цепанет, но посмотрел через console.log(), он берет все section со страницы.

    <section id='banners'>
1
</section>
<section id='2'>
2
</section>
<section id='3'>
3
</section>
<section id='4'>
4
</section>
<section id='5'>
5
</section>
<section id='6'>
6
</section>
<section id='7'>
7
</section>

JS:

$("#banners .video").css("opacity", "1");
        $(window).scroll( function(){
            $('.content_wrap section').each( function(i){
                var bottom_of_object = $(this).position().top + $(this).outerHeight()*0.5;
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                var blOneHeight = $("#banners").height()*0.04; //Высота блока
                var blOneOuterHeight = $(window).scrollTop();
                if (blOneOuterHeight > blOneHeight) {
                    if( bottom_of_window > bottom_of_object ){
                        $(this).find(".video").css("opacity", "1");
                        $("#banners .video").css("opacity", "0");
                        if ($("#banners .video").css("opacity") == '0') {
                            $("#banners .video").css("display", "none");
                        }
                    } else {
                        $(this).find(".video").css("opacity", "0");
                    }
                } else {
                    $(this).find(".video").css("opacity", "0");
                    $("#banners .video").fadeIn(1,function(){
                        $('#banners .video').css("display", "block");
                        $('#banners .video').css("opacity", "1");
                    });
                }
            }); 
        });

Answer 1

var scrollHandle = function() { 
	var top = $(window).scrollTop(); 
	var section = $('section').map(function() { 
      if ($(this).offset().top <= top) return this 
		}); 
   
  if(section.length) { 
    section = section[section.length - 1]; 
    $(".out").text(section.id); 
  } 
} 
$(window).on('scroll resize', scrollHandle).trigger('scroll');

section { 
  min-height: 100vh; 
} 
.out { 
  background-color: red; 
  color: white; 
  position: fixed; 
  padding: 10px 15px; 
  right: 15px; 
  top: 15px; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="out"></div> 
<section id='banners'> 
banners 
</section> 
<section id='2'> 
2 
</section> 
<section id='3'> 
3 
</section> 
<section id='4'> 
4 
</section> 
<section id='5'> 
5 
</section> 
<section id='6'> 
6 
</section> 
<section id='7'> 
7 
</section>