Navbar fixed top pos. абсолютное изменение на относительное при прокрутке

Question

Я хочу изменить фиксированное положение navbar с абсолютного на относительное, когда прокручивает более 600 пикселей. У меня есть этот код:

if (scroll >= 700) { 
    $(".navbar-fixed-top").addClass("navbar-scroll"); 
    } else { 
    $(".navbar-fixed-top").removeClass("navbar-scroll"); 
    } 
}); 

это работает, но я пытался изменить его анимировать (для перехода)

, и я сделал это:

if (scroll >= 700) { 
       $(".navbar-fixed-top").animate ({ 
     position: 'fixed' 
     }, "slow"); 
} else { 
       $(".navbar-fixed-top").animate ({ 
     position: 'absolute' 
     }, "slow"); 
} 
}); 

и это разве работает, Зачем?

Answer 1

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

Working Example

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 700) { 
     $(".navbar-fixed-top").animate({ 
      top: scroll + 10 
     }, 50); 
    } else { 
     $(".navbar-fixed-top").animate({ 
      top: '10px' 
     },50); 
    } 
}); 

Answer 2

Вы не можете анимировать свойство CSS position, от API DOCS Jquery:

Все анимированные свойства должны быть анимированы одного числового значения, за исключением случаев, указанных ниже; Невозможно анимировать большинство свойств, которые не являются числовыми, используя базовую функциональность jQuery. (Например, ширина, высота или левая сторона может быть анимирована, но фоновый цвет не может быть, если не используется плагин jQuery.Color()). Значения свойств обрабатываются как количество пикселей, если не указано иное. Единицы em и% могут быть указаны там, где это применимо.