主页 / 问题 / 709163
Accepted
Александр
Asked:2020-08-22 23:14:38 +0000 UTC2020-08-22 23:14:38 +0000 UTC

如何跟踪块可见性？

  • 772

你能告诉我如何实现块可见性跟踪吗？

我需要将活动类添加到相应块的 li 并将其从其余部分中删除。

$('.blocks .section').each(function(index, element) {
  $(this).attr('data-block', index);
  $('.navigation').append('<li class="scrollto" data-block="' + index + '">Блок ' + $(element).html() + '</li>')
});

$(document).on('click', '.navigation .scrollto', function() {
  var block_id = $(this).attr('data-block'),
    block = $('[data-block="' + block_id + '"]:not(.scrollto)');
  if (block.offset() !== undefined) {
    $('html, body').animate({
      scrollTop: block.offset().top
    }, 1000, 'swing', function() {
      // здесь код если надо что-то делать после прокрутки
    });
  }
  return false;
});
.section {
  display: block;
  height: 350px;
  background: red;
  margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="navigation">
</ul>
<div class="blocks">
  <div class="section">
    1
  </div>
  <div class="section">
    2
  </div>
  <div class="section">
    3
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    $('.blocks .section').each(function(index, element){
  $(this).attr('data-block', index);  
  $('.navigation').append('<li class="scrollto" data-block="'+index+'">Блок '+$(element).html()+'</li>');
  setActive();
});

$(document).on('click', '.navigation .scrollto', function(){
  var block_id = $(this).attr('data-block'),
      block = $('[data-block="'+block_id+'"]:not(.scrollto)');
  if (block.offset() !== undefined){
    $('html, body').animate({
      scrollTop: block.offset().top
    }, 1000, 'swing', function(){
      // здесь код если надо что-то делать после прокрутки
    });
  }
  return false;
});

function setActive(){
  $('[data-block]').removeClass('active');
  $('[data-block]:not(.scrollto)').each(function(index, element){
  	var offsetBot = $(this).offset().top + $(this).height(),
        block_id = $(this).attr('data-block');
  	if (offsetBot >= $(window).scrollTop()){
  		$('[data-block="'+block_id+'"]').addClass('active');
  		return false;
  	}
  });
};

$(window).on('scroll', function(){
	setActive();
})
    .section{ 
  display: block;
  height: 350px;
  background: red;
  margin-bottom: 50px;
}
.scrolltop.active{
  font-size: 1.2em;
}
.section.active{
  background: green;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
</ul>
<div class="blocks">
  <div class="section">
    1
  </div>
  <div class="section">
    2
  </div>
  <div class="section">
    3
  </div>
  <div class="section">
    4
  </div>
  <div class="section">
    5
  </div>
  <div class="section">
    6
  </div>
  <div class="section">
    7
  </div>
  <div class="section">
    8
  </div>
  <div class="section">
    9
  </div>
</div>

    • 1

相关问题