Анимация навигации как сделать аналог?

Question

[ummahusla]

Добрый вечер, помогите пожалуйсто, как сделать аналог https://www.mint.com/ верней навигационой панели, чтобы в начале был прозрачным а при прокрутке - менял цвет и стили.

Буду очень благодарен ссылку на туториал

Comments

[Виталий Киренков]

Их - чей?

[ummahusla]

Да я дебил, забыл линк указать

[littleguga]

ummahusla: не надо так самокритично. Уважайте и любите себя :)

[ummahusla]

littleguga Договорились :)

[Sergej]

Нельзя помогать людям, которым лень нажать cmd(ctrl)+alt+i

Answer 1

[teotlu]

Я для таких вещей использую waypoints и CSS-анимацию.
К примеру, с этим плагином можно написать вот такой сниппет:

$(".waypoint").each( function() {
  			var $this = $(this);
  			$this.waypoint( function(dir) {
    				if(dir === "down") {
      					$this.addClass("reached");
    				}else if($this.data('both-direction') !== undefined) {
      					$this.removeClass("reached");
    				}
  			}, {offset: parseInt($this.data('offset')) || 0 });
});

И потом для любого элемента прописать класс waypoint и (опционально) data-offset — отступ в пикселях, при котором будет добавляться класс reached. И ещё, если указать атрибут data-both-direction, при скролле обратно класс будет убираться. Если не указывать, то останется насовсем. Достаточно удобно использовать такую штуку, если на сайте много элементов, у которых нужно менять класс по мере прокрутки мимо них.

Но если это нужно для одного элемента на сайте, проще написать обработчик на scroll, конечно.

Comments

[ummahusla]

Спасибо большое! ;)

Answer 2

[Андрей]

Сделайте подложку (отдельным элементом) белого цвета и меняйте ей прозрачность от нуля до одного.

Answer 3

[Александр]

На приведенном сайте, с помошью js меняется селектор, который отвечает за отображение стиля панели. И css и js вы можете найти на этом же сайте. Туториал по данной теме нигде не видел. Или вам и куски js и css приложить?)

Comments

[ummahusla]

Ну если есть возможность сниппет на jsfiddle пригодился бы