.resize() and .scroll()?

Question

[100R]

Как переопределить position при изменении окна браузера? Понимаю, что нужно через .resize(), но как уже только не пробивал - не получается.

var $block = $('nav'),
    position = $block.offset().top;

	$(window).scroll(function(){
		if ($(window).scrollTop() > position) {
			$block.addClass('fixed');
		} else {
			$block.removeClass('fixed');
		}
	});

Answer 1

[Сергей delphinpro]

var $block = $('nav'),
var position = $block.offset().top;

$(window).on('resize', function() {
  position = $block.offset().top
});

$(window).scroll(function(){
    if ($(window).scrollTop() > position) {
      $block.addClass('fixed');
    } else {
      $block.removeClass('fixed');
    }
});

Только нужно сделать чуток изменений в коде. У вас сейчас
<nav></nav>
Добавьте обертку
<div.nav-wrapper> <nav></nav> </div>
В скрипте позицию считывайте у враппера, а фиксед делайте наву.

Comments

[100R]

То есть мы сделали переменую position глобальной?

[Сергей delphinpro]

100R: необязательно.
Вы можете завернуть весь этот код в анонимную самовызывающуюся функцию, и переменная не будет засорять глобальную область видимости.

[100R]

Сергей: пример не покажете?

[Сергей delphinpro]

(function(){
  // code here...
})();

Answer 2

[WebDev]

$(window).on('resize', function() {
...
});

Comments

[100R]

Какой-то ответ-не ответ, position = $block.offset().top; как переоприделить если окна браузера уменьшилась?

[WebDev]

100R: Все расчеты нужно поместить внутрь функции.
Если вам надо и при ресайзе и при скролле проверять, то

var $block = $('nav'),  position;

  $(window).on('scroll resize', function(){
     position = $block.offset().top
    if ($(window).scrollTop() > position) {
      $block.addClass('fixed');
    } else {
      $block.removeClass('fixed');
    }
  });

[100R]

WebDev: console.log(position); на изменение окна ноль реакции, только на скролл

[100R]

WebDev: если расчеты поместить внутрь функции: s019.radikal.ru/i633/1609/7c/ebab6d20c6b0.gif