reifter

Ищите по запросу "slider multiple ranges"
Первые варианты:
embed.plnkr.co/XJyMrxVgFixCKkUnwUTA/preview
blog.153.io/Elessar

Думаю поможет вам wd.dizaina.net/en/scripts/stickyfill

960px = 100%
1px =100/960= 0,10416%

А теперь считаем:
940px = 0,10416%*940px=97,916%
10px = 0,10416%*10px = 1,0416%

jsfiddle.net/jnrt7v12

Каждое изменения стиля, походу загрузки, ведет к перерендеру страницы

Посмотрел примеры у плагина. Что увидел.
Уберите класс slicknav_menu у ul id="menu" он сам создаёт копию и добавляет этот класс.
И в media queries у вас есть класс .js плагин его не добавляет в нужное место, поэтому вы должны его создать сами. Пропишите в body или в html class="js" и у вас думаю проблема исчезнет.

p.s. класс js прописывают автоматом, если поддерживаются скрипты браузером

Update: а лучше просто уберите .js и все будет работать

jsfiddle.net/0bL39z2b/1

Если вас правильно понял, тогда добавить в css тегу body

max-width: 1204px;
margin: 0 auto;

тогда получится так:



Обновление, допишите блоку header min-width: 1204px;

.header { min-width: 1204px; }

и чтобы черного фона не было на плашке

.header::after { min-width: 1204px; }

Попробуй останавливать анимацию, перед началом новой

$(window).scroll(function(){

if ($(this).scrollTop() > 1){
$(".top_panel").stop().animate({height: "60px"}, 200);
$(".logo_cont").stop().animate({lineHeight: "60px"}, 200);
$(".main_menu").stop().animate({lineHeight: "60px"}, 200);
}else{
$(".top_panel").stop().animate({height: "90px"}, 200);
$(".logo_cont").stop().animate({lineHeight: "90px"}, 200);
$(".main_menu").stop().animate({lineHeight: "90px"}, 200);
}

});

А вообще, для оптимизации нужно запускать только один раз анимацию

var flagPosition=0;
$(window).scroll(function(){

if ($(this).scrollTop() > 1){
 if(flagPosition!=1) {
   flagPosition=1;
   $(".top_panel").stop().animate({height: "60px"}, 200);
   $(".logo_cont").stop().animate({lineHeight: "60px"}, 200);
   $(".main_menu").stop().animate({lineHeight: "60px"}, 200);
 }
} else {
 if(flagPosition!=0) {
  flagPosition=0;
  $(".top_panel").stop().animate({height: "90px"}, 200);
  $(".logo_cont").stop().animate({lineHeight: "90px"}, 200);
  $(".main_menu").stop().animate({lineHeight: "90px"}, 200);
 }
}

});

Так как блоки изначально скрыты, браузер картинки не загружает в фоновом режиме, когда вы начинаете разворачивать скрипт не может посчитать правильное значение высоты. Поэтому во второй раз, когда картинки уже подгружены, подсчитывается правильная высота. Как вариант указать картинкам сразу фиксированные размеры, должно решить проблему. Ну и вам уже сказали картинки не для веба, слишком большие, уменьшайте их.