0

Несколько дней назад изучал метод scroll смог указать: сместись влево, когда страница будет прокручена на 500рх вниз. Предполагая что когда я прокручу страницу на 500px я увижу как сместится блок.

Но решив усложнить задачу, столкнулся с такой проблемой: А если перед этим блоком будет еще один (резиновый блок) высота которого будет изменяться в зависимости от количества содержимого в нем. Тогда нужный нам блок может сползти вниз или подняться выше. И, когда к нему применятся соответствующие эффекты, мы их просто мы их просто можем не увидеть.

Вопрос: как сделать чтобы блок <div class="totsamiy"></div> сместился от левого края на 150px при появлении его в поле видимости на высоте 150px от нижней части экрана.

Вот выглядит это примерно так: https://jsfiddle.net/engenes/2b9eyn95/4/

<div class="rezinovi">
<h1>
Это наш резиновый блок
</h1>
Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации направлений прогрессивного развития. Разнообразный и богатый опыт рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям.
Не следует, однако забывать, что начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке дальнейших направлений развития. Равным образом консультация с широким активом представляет собой интересный эксперимент проверки новых предложений. С другой стороны консультация с широким активом способствует подготовки и реализации направлений прогрессивного развития. С другой стороны укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным обрНе следует, однако забывать, что консультация с широким активом в значительной степени обуславливает создание форм развития. Задача организации, в особенности же рамки и место обучения кадров позволяет выполнять важные задания по разработке существенных финансовых и административных условий. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации новых предложений. Идейные соображения высшего порядка, а также консультация с широким активом играет важную роль в формировании новых предложений. Товарищи! новая модель организационной деятельности играет важную роль в формировании направлений прогрессивного развития.
Повседневная практика показывает, что консультация с широким активом в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач. Идейные соображения высшего порядка, а также сложившаяся структура организации требуют от нас анализа форм развития.
Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. Равным образом дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации соответствующий условий активизации.
Равным образом укрепление и развитие структуры позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что сложившаяся структура организации влечет за собой процесс внедрения и модернизации систем массового участия. С другой стороны начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Товарищи! рамки и место обучения кадров позволяет оценить значение модели развития. Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание существенных финансовых и административных условий. Равным образом консультация с широким активом способствует подготовки и реализации систем массового участия.азом новая модель организационной деятельности требуют от нас анализа соответствующий условий активизации.

</div>
<div class="totsamiy">

</div>

не стал писать скрипт так как умею задавать жестко, то есть при прокрутке до указанных пикселей, нужный нам блок сместится, а других способов пока не знаю.

1 ответ 1

3

Вы можете на момонент scroll высчитывать насколько нужный вам блок находится на нужной стадии скрола. Вам помогут свойства window.scrollY - на сколько прокрутили window.outerHeight - высота окна и el.offsetTop - отступ элемента по высоте от начала документа.

window.addEventListener('scroll', function (e) {
 var el = document.querySelector('.bottom-notice');
  if(window.scrollY + window.outerHeight - 150 > el.offsetTop) {
    //Элемент на нужной нам позиции
    el.style.marginLeft = '150px';
  }
});
5
  • забыл уточнить, надо больше чем на 150рх), но попытался вставить тот код, что вы дали, все равно почему-то не заработало. Можете на моем примере показать рабочий вариант?
    – engenes
    1 янв 2016 в 15:35
  • Я проверил и этот код работает. Чуть исправил. Когда высота прокруктки + высота экрана - ваш отступ больше отступа по высоте нужного вам элемента, он сдвигается.
    – DStrokov
    1 янв 2016 в 16:10
  • Еще чуть исправил селект) вы можете вставить прямо на этой странице в консоль этот код и описание под кнопкой 'Добавить еще один ответ" будет сдвигаться как вы хотите с .totsamiy
    – DStrokov
    1 янв 2016 в 16:17
  • var $block = $('.block'); $(window).on('scroll', function (event) { var top = window.scrollY + window.outerHeight; var paddingBottom = 150; if(top+paddingBottom > $block[0].offsetTop) { $block.addClass('active'); } else { $block.removeClass('active'); } });
    – DStrokov
    1 янв 2016 в 17:31
  • все я пока ждал как раз написал примерно то же самое, все заработало, благодарю)))
    – engenes
    1 янв 2016 в 17:36

Ваш ответ

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

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