Сергей delphinpro

Пишем кастомный слайдер. Нафиг не нужен здесь готовый.

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

Дальше определяем три состояния картинки.

Первое уже определено - это невидимый слайд, текст скрыт (opacity:0), картинка за пределами не видна.

Второе состояние - "следующий слайд". Здесь текст все еще не виден, а картинка маленькая.

Третье состояние - "активный слайд". Здесь текст виден и и картинка большая в центре.

А дальше самое простое – по кликам на кнопки управления нужно просто менять состояния слайдов с помощью навешивания и убирания у них css классов.

ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.

ну тогда такой вариант
Оборачиваем эту панельку в еще один блок. Этот блок будем позиционировать. Его высота должна быть равной высоте панельки. примерно так



Красный блок - overflow:hidden
Зеленый - это ваша панелька выезжающая. Из-за overflow обрезки у родителя она будет выезжать сверху как будто из под прозрачной шапки, но под самой шапкой ее не будет видно.

Чтобы красный блок не мешался - ему pointer-event:none; А чтобы при этом зеленый был кликабельным, ему – pointer-events: auto (или all)

слушаем onscroll, пишем значение в localStorage
при загрузке страницы вытаскиваем значение из хранилища и устанавливаем скролл.

так у вас init и write идут сразу друг за другом

function css() {
  return src('./src/assets/scss/style.scss', {sourcemaps: true})
    ...
+   .pipe(sourcemaps.init())
-   .pipe(sass({sourceComments: 'map'}))
+   .pipe(sass())
-   .pipe(sourcemaps.init({loadMaps: true}))
-   .pipe(sourcemaps.write())
    .pipe(groupCssMediaQueries())
    ...
    .pipe(rename({
      suffix: '.min',
      extname: '.css'
    }))
+   .pipe(sourcemaps.write('.'))
    .pipe(dest(path.build.css))
    .pipe(browserSync.reload({stream: true}))
}

Зачем всё это?
Посмотрите на картинку иначе: кнопка просто висит поверх линии.

<hr>
<button>Наверх</button>

button {
  transform: translateY(-50%);
}

Университеты вы перебираете в цикле, а переменная modal у вас одна общая на всех. Сделайте отдельную переменную для каждого универа.

Так они у вас как раз и не накладываются.
Может надо наоборот, чтобы накладывались?

Сместить нижний ряд на один пиксель вверх.
Второе поле во втором ряду сместить на один пиксель влево.
В любом не обычном состоянии (ошибка, фокус) помещать поле выше остальных (увеличивать z-index).

Всё это решается стилями, непонятно, зачем вагон тегов у вопроса.

Например так.

document.querySelectorAll('.element').forEach(el => {
  const id = el.getAttribute('id');
  fetch('https://mysite.com', {
    body: {
      id
    }
  })
  .then(response => response.json())
  .then(response => {
    if (response.status === 'ok') {
      el.style.color = 'green';
    } else {
      el.style.color = 'red';
    }
  })
  .catch(err => {
    console.log(err);
    el.style.color = 'red';
  });
});

на сервере

$id = $_GET['id'];
// Что-то делаем
$result = doSomething($id);
$response = [
  'status' => $result ? 'ok' : 'error'
];
echo json_encode($response);
die;

А - Асинхронность

jQuery.ajax({ // 1. Выполнится этот код
            url: 'receiveData.php',
            type: 'POST',
            data: {},
            success: function () { 
                 // 3. А уже после окончания запроса выполнится этот код
                 // Именно в это время данные будут получены и сохранены.
            },
            error: function () {
                console.log('ERROR');
            }
        })
receiveTxt(); // 2. Потом сразу же выполнится этот код

Отсюда следует простой вывод. Вызов функции receiveTxt следует перенести в коллбэк success

Не очень понятно.
Попробую переформулировать.

Вы открываете меню на мобильном разрешении, увеличиваете окно, и меню остается открытым, хотя на декстопе оно уже не требуется.
Так?

Тогда есть решение без javascript.

.menu {
  right: -100%;
}

@media(max-width: 768px) {
  /* Открывать меню только при ширине, меньшей 768 */
  .menu.open {
    right: 0;
  }
}

Остается небольшой сайд-эффект. Если снова уменьшить окно, меню появится открытым.
С этим часто можно мирится. Но если нет, то тогда придется проводить манипуляции скриптами

const m = matchMedia('(min-width: 768px)');
function watch(e) {
  if (e.matches) { // Сработает, когда ширина превысит 768px
    document.querySelector('.menu').classList.remove('open');
  }
}
m.addListener(watch);
watch(m);