Nikolay Talanov

Так как я уже убитый после рабочего дня и войны с кастомными скроллбарами, то полного ревью по веб-перфу дать не смогу. Но по мелочам пробежаться могу.
1) Вот так выглядит таймлайн сайта, после полного скролла вниз, а затем вверх (смотреть на верхний график).

Если в кратце, то все печально :) На всех переходах фпс стабильно падает до 30 (и иногда ниже). Ваша цель - 60 фпс в среднем, и не ниже 40 на паре-тройке фреймов при переходах.
Если вы чайник в замерах веб-перформанса с помощью таймлайна (и дев тулс вообще), то вам сюда:
а) https://developers.google.com/web/fundamentals/per... - святой грааль.
б) https://www.udacity.com/course/browser-rendering-o... - по сути дела дополнение к текстовому варианту, но только в виде отличных видео и мини-тестами. Там же на udacity есть похожил курс от Григорика.
в) Искать другие годные статьи в дайджестах и блогах, пилить/изучать демки и все такое.
2) Очень беглый осмотр показал, что у некоторых элементов анимация происходит с помощью изменения таких свойств как left например (вылезающий и жутко тормозящий блок справа на 3 странице). В 90% случаев для анимации движения/перемещения/отображения прилично использовать только transform/opacity, особенно когда речь идет о больших элементах. С анимацией всяких left/top/width и подобных вещей для больших элементов можете вообще забыть о 60фпс.
3) Основную ставку вам надо будет делать на создание отдельных слоев для элементов, проще говоря юзать translateZ/backface-visibility. Но только юзать это надо с умом, и каждый раз все профилировать через таймлайн. В веб-перфе есть одна крылая фраза "Tools, not rules".

Это не плохо. Ибо в самом ангуларе столько всего сделано через жопу, что использование jQuery в некоторых местах будет вашей наименьшей проблемой. Но тут очень важно понимать, где и как этот jQuery юзать, ибо простое подключение глобального файлика с jq-кодом особых результатов не даст из-за асинхронности angular'а, по этому вам все равно придется запихивать jq-код во всякие link функции и прочие места, так что код в итоге получится вполне нормальным.

Примерное описание логики без реального кода:
1) Получаете размеры секций, на которое будут ориентироваться эти навигационные якоря (height/offsetTop).
2) Навешиваете на глобальный скролл обработчик, который на основе текущего scrollTop и сравнения с размерами и пункта 1 будет понимать, в какой же секции вы сейчас находитесь и навешивать к нужному кружочку класс active.
3) Полируете все это дело. Нужно будет навесить обработчик на window resize, чтобы пересчитывать размеры из пункта 1. Можно будет даже сделать, чтобы из одного кружка шла линия прогресса в другому (при разных размерах секций), но это уже из разряда извращений :)

Код примерно будет выглядеть вот так (работает сразу для мыши и тача):

$(document).on("mousedown touchstart", ".%класс_области_активности_ивентов%", function(e) {
  // если необходимо, сохраняем стартовую позицию ивента
  var startY =  e.pageY || e.originalEvent.touches[0].pageY;

  $(document).on("mousemove touchmove", function(e) {
    // получаем Y координаты во время движения с зажатой мышью/тачем
    var y = e.pageY || e.originalEvent.touches[0].pageY;
    // ваши действия со всей этой фигней
  });

});

$(document).on("mouseup touchend", function() {
  // отключаем обработчики маусмува/тачмува
  $(document).off("mousemove touchmove");
  // действия, которые вы возможно хотите сделать по окончании действий юзера
});

Мой ответ является расширенной версией ответа Илья Шатохин про добавление класса .no-transition.
И он в общем то полагается на костыль, но не настолько ужасный как setTimeout.

.no-transition {
  transition: none !important;
}

Затем в js пишем нечто подобное

elem.classList.add("no-transition");
var triggerLayout = elem.offsetHeight;
// действия с элементом которые произойдут мгновенно

Суть такова, что работа с DOM в браузере оптимизирована таким образом, что он "группирует" все изменения и потом применяет их одновременно. Но, если в js коде обращаться к свойстам элементов, которые триггерят лэйаут, эти группы будут "дробиться" в этом месте вызова. В итоге вот эта самая строчка "var triggerLayout = elem.offsetHeight;" вызывает триггер лэйаута и операция с элементом происходит уже так, словно к нему добавлен класс без транзишена. Точно таким же образом например анимируются элементы с display: none, которые надо показать с помощью изменения opacity. Вначале вы меняете свойство display, затем триггерите лэйаут, затем добавляете класс изменяющий опасити - у вас происходит анимация. Без триггера элемент просто моментально появится.
Таблицу css триггеров можно найти тут - csstriggers.com
+ вот тут еще пишут про это gent.ilcore.com/2011/03/how-not-to-trigger-layout-...
Сам по себе лэйаут нужно триггерить только тогда, когда это является лучшим способом реализации анимации, ибо это влияет на производительность. На эту тему (и многие другие вещи) вам сюда - https://developers.google.com/web/fundamentals/per...

Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.

У вас там используется jQuery метод .live, которых сдох уже пару лет назад и не поддерживается начиная с 1.7 или 1.6 версии примерно. А в данный момент у вас стоит 1.11 версия, то есть современная. Вам либо код переписывать (менять live на on и все такое), либо ставить древнюю версию jQuery, если в данный момент нет возможности перелопатить код.
Вот собственно сама строчка кода, на которую матерится браузер (там еще и другие такие есть, если что):
$('#cart > .heading a').live('click', function() {

1) calc про который вы уже написали сами
2) Js (так себе вариант)
3) Использовать padding-top: 120px для header, а nav поместить вверху с position: absolute. Внутри header создать блок с height: 100%, он в свою очередь благодаря паддингу родительского элемента займет все оставшееся пространство, вычитая паддинг. И там уже делайте что-хотите.
Естественно у header должен быть position: relative и для элементов должен быть задан box-sizing: border-box;

Хочется хардкора - читайте статьи в интернетах. Книги это больше про структурированную информацию и закрепление знаний. По крайней мере сколько я не начинал читать js-книг для "профессионалов/ниндзя/магистров" везде меня ждали одни и те же вещи, либо что-то устаревшее. А вот в интернетах непаханое поле из хардкорных статей и демок. Искать их правда не так просто, обычно такие вещи попадаются случайно.
Ну и если вы прям совсем-совсем хардкора ищите, то вам на гитхаб, читать исходники крутых и известных библиотек/фреймворков. Например в исходниках монструозного ангуляра можно найти много всяких фишек и крутых решений (речь именно об отдельных частях).
Update: ну и если вам обязательно нужна книга (читать в метро или на диване), то могу посоветовать как минимум одну - Async Javascript (www.amazon.com/Async-JavaScript-Responsive-Pragmat...)
Скажу честно, я её даже не осилил до конца, у меня в какой-то момент мозг расплавился от асинхронности :) Хотя пробовал я её еще более зеленым, надо бы дочитать сейчас.

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

.panel {
  transition: transform 0.7s;
}

1) Viewport единицы. В данном случае 100vh. Поддержка вот такая caniuse.com/#search=viewport
2) Если ваш див не находится где то глубоко в разметке, а лежит прямо в body (или глобальном контейнере), то можно сделать вот так:

html, body {
  height: 100%;
}
.container { // если имеется
  height: 100%;
}
.block {
  height: 100%;
}

Так как мы не задаем overflow: hidden для body или контейнера, то с ними ничего плохого не произойдет, контент по прежнему будет адекватно отображаться и скроллится.

Лучше на достаточно хорошем уровне изучить html+css+js (ваниллу+jQuery) и только потом смотреть в сторону фреймворков. Фрейморвки конечно вещь крутая, но их слишком много (или они слишком громоздкие). Отличные познания в js, и фронтенде в целом, не денутся никуда, а вот знания полученные от изучения особенностей и внутренностей какого-нибудь монструозного ангуляра могут с легкостью превратиться в тыкву с выходом, допустим, второй его версии (не все конечно, но большая часть). Все таки фреймворки это вещи уже под конкретные задачи, и они чаще всего рассчитаны на команды.