0

есть 2 дива:

  • один в ширину 0%
  • другой в высоту 2000+ px

Нужно синхронизировать их, по мере прокрутки второго дива

$(window).scroll(function () {
    if (window.pageYOffset >= $('.article').offset().top) {
    }
})

Проверка на вхождение есть , как дальше мне синхронизировать процент ширины первого дива с высотой и нынешней прокруткой второго

5
  • Я пришел сюда помогать, а не ребусы решать... Поясните внятно, чего вы изволите желать
    – Oleksandr
    5 апр 2017 в 12:48
  • есть 2 дива , один в ширину 0% другой в высоту 2000+ px мне нужно синхронизировать их по мере прокрутки второго дива $(window).scroll(function () { if (window.pageYOffset >= $('.article').offset().top) { } }) Проверка на вхождение есть , как дальше мне синхронизировать процент ширины первого дива с высотой и нынешней прокруткой второго
    – MoJlo4HuK
    5 апр 2017 в 12:51
  • @MoJlo4HuK это следует писать в самом вопросе, а не в комментариях к нему. Как задавать вопросы
    – Sublihim
    5 апр 2017 в 12:54
  • @Sublihim это было уточнение , а не сам вопрос
    – MoJlo4HuK
    5 апр 2017 в 13:00

1 ответ 1

1

Описано непонятно, но предположу что как-то так:

$(document).on('scroll', onScroll);

function onScroll()
{
  var width,
      scroll = $(window).scrollTop(),
      firstBlock = $('.block-1'),
      secondBlock = $('.block-2'),
      secondBlockHeight = secondBlock.innerHeight(),
      secondBlockTop = secondBlock.offset().top;
      
  if(scroll >= secondBlockTop){
    width = (scroll - secondBlockTop) / secondBlockHeight * 100;
  } else if (scroll < secondBlockTop){
    width = 0;
  } else if(scroll >= secondBlockTop + secondBlockHeight) {
    width = 100;
  }
  
  firstBlock.css({ width: width + '%' });
}
.block-1 {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 100px;
  background-color: red
}

.block-2 {
  float: right;
  width: 100px;
  height: 2000px;
  margin: 100px 0;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-1"></div>
<div class="block-2"></div>

1
  • ну либо для любителей мимификации можно убрать условия, оставить только: width = (scroll - secondBlockTop) / secondBlockHeight * 100; а стиль применять так: firstBlock.css({ width: width < 0 ? 0 : (width > 100 ? 100 : width) + '%' }); 5 апр 2017 в 13:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.