Добавить новый класс блоку при его прокрутке до верхней границы окна, при определенной ширине экрана

283

24 августа 2017, 21:02

Есть следующая конструкция:

$(document).ready(function() { 
  var element = '.someblock'; 
  var newclass = 'greenbg'; 
  $(window).scroll(function() { 
    if ($(window).scrollTop()) { 
      $(element).addClass(newclass); 
    } else { 
      $(element).removeClass(newclass); 
    } 
  }); 
});

.someblock { 
  width: 200px; 
  padding: 20px; 
  border: 1px solid #ccc; 
  background: #f5f5f5; 
  margin-top: 130px; 
  margin-bottom: 500px; 
} 
 
.someblock.greenbg { 
  background: #3ED40D; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="someblock"> 
  Жизненный опыт - это когда неприятности воспринимаешь как само собой разумеющееся. 
</div>

Скрипт добавляет новый класс для блока с классом "someblock" как только начинаешь прокрутку страницы.

Помогите изменить скрипт таким образом, чтобы новый класс добавлялся не при начале прокрутки страницы, а когда блок с классом "someblock" достигнет верхней границы экрана, также требуется чтобы данный скрипт срабатывал только при условии если по ширине экран больше 980px (если по ширине меньше 980px, то все остается как есть, новые классы не добавляются).

Подскажите пожалуйста, как реализовать данную задачу в виде рабочего скрипта?

Answer 1

addClassOnTop(); 
 
function addClassOnTop() { 
  const $window = $(window), 
    $block = $('.someblock'); 
     
  onScroll(); 
  $window.on('scroll', onScroll); 
   
  function onScroll() { 
    if($window.width() <= 980) return false; 
   
    $block.toggleClass('greenbg', $window.scrollTop() === 0); 
  } 
}

.someblock { 
  width: 200px; 
  padding: 20px; 
  border: 1px solid #ccc; 
  background: #f5f5f5; 
  margin-top: 130px; 
  margin-bottom: 500px; 
} 
 
.someblock.greenbg { 
  background: #3ED40D; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="someblock"> 
  Жизненный опыт - это когда неприятности воспринимаешь как само собой разумеющееся. 
</div>