Анатолий Куликов

Честно говоря, ни разу не слышал, чтобы scss генерировал переменные для своего использования.

Вся же "магия" scss происходит тогда, когда происходит генерация css - там программа идёт по файлу и соответствующе обрабатывает код.

Могу посоветовать попробовать сгенерировать нужный код любым языком программирования и вставить.

Вот небольшой список, сам пользуюсь:
https://www.materialui.co/colors
https://brandcolors.net/
https://colorscheme.ru/

Для этого необходимо сделать 2 вещи:
1) блок, содержащий в себе меню, должен быть фиксированным на всю ширину и высоту экрана, с наибольшим показателем z-index'a. То есть что-то типа такого:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10000;

2) При вызове меню на body повесить overflow: hidden, чтобы оно не скроллилось. Можно сделать путём добавления с помощью js нужного класса.

Здесь понадобится и то, и другое. Очень сложный пример, полностью соглашусь.

Тут наверное сделать без vue/react/angular будет достаточно больно.

Хотя данный эффект не оригинален - просмотрите, возможно что-то подобное реализовано и есть какая-то библиотека. Есть сайт unheap, посмотрите там.

Первое, что пришло в голову:
- отправляем данные в массив
- отрисовываем массив, но кнопки элементов вешаем функции вверх/вниз

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

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

Можно вместо позиции в массиве ввести какой-нить произвольный ключ.

Скорее всего для этого уже написан плагин, нужно поискать.

Можно ещё сделать две ссылки/кнопки и обернуть это div'ом.

В данном случае это так.

Опишу средне: сначала, при загрузке страницы, нужно сделать так, чтобы логотип был скрыт. Можно написать для него особый класс стиля.

Затем, с помощью js навешиваете listener, который наблюдает, пока пользователь не прокрутит страницу на x пикселей.

После этого у логотипа меняете класс, чтобы он стал виден.

В интернете полно рецептов такого кода, правда он в основном про то, как сделать шапку сайта фиксированной при прокрутке. Там же обычно подробная инструкция, что как и где.

Берите любой понравившийся и используйте на здоровье.

Если нужно просто запретить отображать контент страницы, то проще всего на body повесить overflow:hidden, сверху всего - заглушку на весь экран, а потом следить с помощью js, пока весь контент не загрузиться. После чего убираем заглушку и отменяем стиль у body.