Как объединить два javaскрипта?

Question

[Максим]

Привет!
Можно ли как-то объединить эти скрипты в один?

Подправил.

const targetNavbarDesktop = document.querySelector('.targetNavbarDesktop');
const fixedNavbarDesktop = document.querySelector('.fixedNavbar');
const obFixedNavbarDesktop = new IntersectionObserver(obCallbackDesktop);

function obCallbackDesktop(payload) {
	if (document.documentElement.clientWidth > 992) {
		if (payload[0].boundingClientRect.y < 0) {
			document.querySelector('class1').style.marginBottom = fixedNavbarDesktop.offsetHeight + 'px';
			fixedNavbarDesktop.classList.add('class2');
		} else {
			fixedNavbarDesktop.classList.remove('class2');
			document.querySelector('class1').style.marginBottom = '0';
		}
	}
}
obFixedNavbarDesktop.observe(targetNavbarDesktop);

И

const targetNavbarMobile = document.querySelector('.targetNavbarMobile');
const fixedNavbarMobile = document.querySelector('.fixedNavbar');
const obFixedNavbarMobile = new IntersectionObserver(obCallbackMobile);

function obCallbackMobile(payload) {
	if (document.documentElement.clientWidth < 992) {
		if (payload[0].boundingClientRect.y < 0) {
			document.querySelector('class1').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
			fixedNavbarMobile.classList.add('class3');
		} else {
			document.querySelector('class1').style.marginBottom = '0';
			fixedNavbarMobile.classList.remove('class3');
		}
	}
}
obFixedNavbarMobile.observe(targetNavbarMobile);

Comments

[Алексей Дубровин]

А, что вы пытаетесь сделать?
Добавить стиль, в зависимости от разрешения экрана?)

[Максим]

Алексей Дубровин, вроде того

[Алексей Дубровин]

Максим, Ну, это можно решить без помощи js
https://developer.mozilla.org/en-US/docs/Web/CSS/M...

@media screen and (min-width: 30em){
.class1{
width:.....
}
}

Но, по названию функции, вам нужен фиксированный хедер?
https://developer.mozilla.org/en-US/docs/Web/CSS/p...
Это вообще решается 1 css свойством

[Максим]

Алексей Дубровин,
Да, но при разрешении меньше 992 хочу добавить в скрипт событие при скролле
Когда пройдет пересечение элемента "targetNavbarMobile" при скролле, класс "class3" не добавится к ".fixedNavbar"
А вверх добавится. Но до элемента "targetNavbarMobile", после класс "class3" удалится

как-то так

[Максим]

А задача такая. На десктопе блок .fixedNavbar становится фиксированным после .targetNavbarDesktop
Меньше 992 - блок .fixedNavbar прячется\показывается. Но наблюдатель другой .targetNavbarMobile

[Алексей Дубровин]

Максим,
Ну, пока, все что вы делаете, можно сделать с помощью css)
И правильной верстки

[Максим]

Интересно как же

[Максим]

Алексей Дубровин, Я так понял, что по моему вопросу, вы помочь не сможете
В любом случае, спасибо за помощь!!

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Максим]

Модератор, Спасибо за поправку. Учту в дальнейшем

Answer 1

[Lapita12]

const targetNavbarDesktop = document.querySelector('.targetNavbarDesktop');
const fixedNavbarDesktop = document.querySelector('.fixedNavbarDesktop');
const obFixedNavbarDesktop = new IntersectionObserver(obCallbackDesktop);

function obCallbackDesktop(payload) {
  if (document.documentElement.clientWidth > 992) {
    if (payload[0].boundingClientRect.y < 0) {
      document.querySelector('.class1').style.marginBottom = fixedNavbarDesktop.offsetHeight + 'px';
      fixedNavbarDesktop.classList.add('class2');
    } else {
      fixedNavbarDesktop.classList.remove('class2');
      document.querySelector('.class1').style.marginBottom = '0';
    }
  }
}
obFixedNavbarDesktop.observe(targetNavbarDesktop);

const targetNavbarMobile = document.querySelector('.targetNavbarMobile');
const fixedNavbarMobile = document.querySelector('.fixedNavbarMobile');
const obFixedNavbarMobile = new IntersectionObserver(obCallbackMobile);

function obCallbackMobile(payload) {
  if (document.documentElement.clientWidth < 992) {
    if (payload[0].boundingClientRect.y < 0) {
      document.querySelector('.class1').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
      fixedNavbarMobile.classList.add('class3');
    } else {
      document.querySelector('.class1').style.marginBottom = '0';
      fixedNavbarMobile.classList.remove('class3');
    }
  }
}
obFixedNavbarMobile.observe(targetNavbarMobile);

Comments

[Lapita12]

Максим,

const targetNavbar = document.querySelector('.targetNavbar');
const fixedNavbar = document.querySelector('.fixedNavbar');
const obFixedNavbar = new IntersectionObserver(obCallback);

function obCallback(payload) {
  if (payload[0].boundingClientRect.y < 0) {
    document.querySelector('.class1').style.marginBottom
= fixedNavbar.offsetHeight + 'px';
    fixedNavbar.classList.add('class2');
  } else {
    fixedNavbar.classList.remove('class2');
    document.querySelector('.class1').style.marginBottom = '0';
  }
}
obFixedNavbar.observe(targetNavbar);

window.addEventListener('resize', () => {
  obFixedNavbar.disconnect()
;
  obFixedNavbar.observe(targetNavbar);
});

[Lapita12]

Максим, Вы сами то пытались?
Вы даже толком мне ошибку не пишете которую выдаёт, только задание "Сделать" здесь такое запрещено.

Обо­значь­те цель что в конечном итоге вы хотите получить?
Я не экстрасенс

[Максим]

В любом случае, спасибо за помощь!!