Greeg Zagrelov

return obj[condition]();

этот код идентичен  при condition === true
  return obj.true();
  return obj[condition]();

То есть вы можете обращается к полям обьекта как к элементам массива.
Плюс идет преобразование булевого значения в строковое (хотя я тут не уверен)

Ну и еще один способ https://developer.mozilla.org/ru/docs/Web/JavaScri...

obj - это объект.
К полям объекта можно обращаться через точку или квадратные скобки

например

const obj = { prop: 123 }

// Это два одинаковых выражения
obj.prop // 123
obj['prop'] // 123

Строка 'prop' тоже может быть переменной

const obj = { prop: 123 }
const name = 'prop';
obj[name] // 123

Круглые скобки - это вызов функции.
Функция может содержаться в переменной

const my_func = function() {}
// чтобы ее вызвать
my_func();

И все это может комбинироваться.
Функция может быть частью объекта

const obj = {
  my_func: function(){}
}

Может передаваться в объект через переменную

const my_other_func = function() {}
const obj = {
  my_func: my_other_func
}

И может быть вызвана
при обращении к свойству объекта через точку
obj.my_func()
при обращении к свойству объекта через квадратные скобки

obj['my_func']()
// или
const name = 'my_func';
obj[name]()

в квадратных скобках — переменная с именем свойства

const obj = { a: "AAA", b: "BBB", "outer space": "UFO" };

let name = "a";
console.log( obj[name] ); // "AAA"

name = "outer space";
console.log( obj[name] ); // "UFO"

Поскольку ключами объекта могут быть только строки (и символы),
то Булевы true или false переводятся в строки "true" и "false".
В объекте с двумя свойствами, в которых лежат функции: { "true": function1, "false": function2 } вызывается одна из этих двух функций, в зависимости от значения true или false.

А зачем это делать через скрипт? Задай нужному блоку высоту через css, если необходимо.

Если вам нужно что бы после преодоления определённой отметки, цвет хедера менялся, тогда что-то вроде :

document.addEventListener('resize', () => {
  if (window.scrollY > 200 && heder.style.color != 'red') {
    header.style.color = 'red'
  } else if (header.style.color == 'red') header.style.color = 'auto'
})

А если вам нужно что бы цвет изменялся плавным переходом по мере скролла тогда вероятно вам стоит обратиться к плагину ScrollMagic

Есть же документация https://swiperjs.com/api/
И вот пример оттуда

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

неа нельзя, но можно нагуглить решение типа этого
https://stackoverflow.com/a/14469048

Чтобы управлять положением «ближе\дальше» используй z-index. Значение relative входит во flex-поведение по умолчанию.

Ты position:absolute; для видео указывал? Если да, то вот тебе ответ: потому что блок з таким позиционированием ни как не влияет на позиционирование других блоков, то есть по сути этот блок для других блоков как воздух. Если хочешь чтобы только текст был поверх видео, то используй это свойство для него, а не для самого элемента с видео!

Хороший источник с актуальной информацией.

Вот по шагам
https://vuetifyjs.com/en/getting-started/quick-start

Разные варианты описаны тут

Будем полезным это видео, там кратко рассказывается как интегрировать html шаблон

так у вас явно косяк с запросами. Какой-то блок по прежнему держит ширину десктопа. Ищите.

openMenu.onclick = function () {}
эта штука вообще не вызывалась, можно было туда console.log('я здесь') положить чтобы проверить



nav ul:active{display: block }
и здесь :active это не имя класса, имя класса через точку ul.active