Определение значений при resize и выполнение функции

147

30 сентября 2017, 23:49

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

var navOffset = $('.shop-tabs').offset(); 
var navHeight = $('.shop-tabs').height(); 
$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > navOffset.top) { 
        $('.shop-tabs').addClass('fixed'); 
        $('.shop-tabs-container').css('padding-top', navHeight); 
    } else { 
        $('.shop-tabs').removeClass('fixed'); 
        $('.shop-tabs-container').css('padding-top', '0'); 
    } 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
.block1, 
.block3 { 
  height: 1000px; 
  background: #eee; 
} 
 
.shop-tabs { 
  height: 60px; 
  background: #333; 
} 
 
.shop-tabs.fixed { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block1"></div> 
<div class="shop-tabs-container"> 
  <div class="shop-tabs"></div> 
</div> 
<div class="block3"></div>

Используя .offset мы определяем текущее положение блока и когда значение .scrollTop() его превышает, фиксируем данный блок. При возврате возвращаем не место.

В чем суть вопроса. Необходимо сделать так, чтоб при масштабировании страницы или сужении экрана вылавливать новые значения высоты .shop-tabs и его положения на странице от верхней части экрана, после чего передавать эти значения в условие, которое работает при resize и scroll. Так же, не выполнять функцию при разрешении менее 980px.

Заранее спасибо