lamer350

Смотрите на каждой странице class к body, на каждой странице есть уникальные классы
и прописывайте свойства меню относительно нужного класса страницы

в joomla подгружается еще jQuery no conflict по умолчанию, в гугле найдете множество ответов как использовать jquery в таком случае, самый простой (в объяснении) - заменить все $ на jQuery

Это все потому что вы забыли скобку в конце:

jQuery(function(){
    alert("НЕ РАБОТАЕТ");
});

Можно увеличить масштаб изображения до 110% (или больше, в зависимости от коэффициента смещения относительно курсора) и тогда будет запас для передвижения.
Так как вы используете background-size:cover; то у вас не получится использовать масштаб для фона, выход будет таким:
1. Завернуть контейнер фона в еще один контейнер, например:

<div class="wrapper">
   <div class="background"></div>
</div>

2. Тогда в CSS:

.wrapper{
   height: 100vh;
   width: 100%;
   overflow: hidden;
   position: relative;
}
.background{
   width: 110%;
   height: 110%;
   margin: -5%;
   /* ваш остальной css код для фона */
}

Так же стоит обратить внимание что для контейнера background нужно использовать margin либо top/left в зависимости от того чем манипулирует ваш плагин parallax чтобы не было конфликта.

Проще всего внедрить какой нибудь валидный параметр для div, например data-speed.
Тоисть в HTML ваш DIV выглядел бы так:

<div class="section-1" id="container" data-speed="1">

Это некий коэффициент, который вы можете регулировать как вам угодно, к примеру 0.5 если поставить - будет скролится в 2 раза медленнее, а если поставить 3 - будет скроллится в 2 раза быстрее.
Тогда js код будет выглядеть так:

function update() {
  var pos = $(window).scrollTop();
  $('.container').each(function() {
    var $element = $(this);
    var height = $element.height() - 18;
    var speed - $element.attr('data-speed');
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos*speed) * velocity) + 'px');
  });
  $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos*speed) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - (pos*speed) / 2) * velocity) + 'px');
};

если кратко, чтобы легче было найти в чем отличии, вводите новую переменную speed и все pos умножаете на speed
И потом в HTML методом перебора коэффициентов добиваетесь нужного вам эффекта.

Та просто блокируйте его изначально пока не заполнят первое поле. Вешайте событие на f

f.addEventListener('keyup', function() {
               if (f.value == '') {
                   s.disabled = true;
               }else{
                s.disabled = false;
              }
    });

https://codepen.io/anon/pen/oMGjGB

https://codepen.io/anon/pen/GBvVbR
Только у вас еще ошибка в html, label for 2 должно быть

У меня возникает только одна мысль, проверить доступность js/scrolloverflow.min.js - так как походу этот файл не подгружается

https://codepen.io/anon/pen/KBdxNN
Там еще помимо комментариев выше есть нюансы, в том числе проблема с циклом так как length выводит количество элементов, а цикл начинается с 0, и у вас один лишний запрос в цикле, а в последствии после цикла код не будет выполняться.