Как при скролле создать класс и переместить в него некоторые элементы?

Question

[kaidos]

При скролле мне нужно зафиксировать меню, я это сделал вот так:

$(function() {
    menu_top = $('.header__menu').offset().top;
    $(window).scroll(function () {
      if ($(window).scrollTop() > menu_top) {
        if ($('.header__menu').css('position') != 'fixed') {
          $('.header__menu').css('position','fixed');
          $('.header__menu').css('top','0');
          $('.content').css('margin-top','80px');
        }
      } else {
        if ($('.header__menu').css('position') == 'fixed') {
          $('.header__menu').css('position','');
          $('.header__menu').css('top','');
          $('.content').css('margin-top','');
        }
      }
    });
});

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

<div class="header__scroll__block__container">

    <div class="header__scroll__block">

        <div class="header__intro__logo">
            <a href="#"><img src="logo.svg" alt=""></a>
        </div>

        <div class="header__intro__contact">

            <p class="intro__contact__schedule">Пн-Вс 7:00 - 19:00 (Мск)</p>
            <p class="intro__contact__number">[phone]</p>
            <a href="#" class="intro__contact__call">Заказ звонка</a>

        </div>

        <div class="search__wrapper">

            <input type="search" placeholder="Поиск">
            <div class="search__img"><img src="search.svg" alt=""></div>

        </div>

        <div class="nav__bar__items">

            <a href="#" class="nav__bar__login">Войти</a>
            <a href="#" class="nav__bar__links"><img class="img-svg" src="like.svg" alt=""></a>
            <a href="#" class="nav__bar__links"><img class="img-svg" src="cart.svg" alt=""></a>

        </div>

    </div>

</div>

Классы

.header__intro__logo .header__intro__contact .search__wrapper .nav__bar__items

нужно достать из своих блоков шапки, и переместить в обвертку

.header__scroll__block__container > .header__scroll__block

. Пробовал $('header.header').addClass но класс добавлялся в одну строку к .header, а нужно чтобы он создавался внутри .header.

Answer 1

[Nikita Komissarov]

Решение

Исходный HTML

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Вставляем элемент "h2" внутрь элемента с классом "container"
("prepend" - в начало / "append" - в конец)
$('.container').append($('h2'));

Результат

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

Ты можешь не только использовать это на существующем элементе, но и создать новый налету
$('.container').prepend('<h1>Hello World!</h1>');

<h2>Greetings</h2>
<div class="container">
  <h1>Hello World!</h1>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Если я правильно понял, ты хочешь сделать "липкую" панель навигации и у неё есть дополнительные блоки, которые также должны сохранять относительную позицию при прокрутке страницы.

В вёрстке нет класса "header__menu"
Можешь прислать скриншот как это выглядит?
Возможно тебе просто нужно создать родительский блок для всех них и уже к нему применять стиль fixed

Comments

[kaidos]

[kaidos]

В .nav__bar__container и .header__intro__container, мне нужно эти классы:
.header__intro__logo .header__intro__contact .search__wrapper .nav__bar__items,
переместить в класс .header__scroll__block который вложен в .header__scroll__block__container.
Только эти классы нужно еще создать (.header__scroll__block__container > .header__scroll__block) в моей функции скролла.

[Nikita Komissarov]

Кажется я тебя понял.

Судя по скриншоту, у тебя есть JQuery на странице, значит ты можешь использовать функции append и prepend.

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

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.container').append($('h2'));

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

Обрати внимание, ты можешь не только использовать это на существующем элементе, но и создать новый налету:

$('.container').append('<h1>Hello World!</h1>');