Вопрос: Как переделать код под ООП?

Лучший ответ:

 Вынести в переменные (а лучше в константы const) все элементы HTML. Например, как сделано с PanelMenuLinks
Использовать вместо, например querySelectorAll("#block_panel_menu")[0] getElementById("block_panel_menu") 
А там, где надо нескольким элементам из массива присвоить значения, использовать циклы forEach

Вразброс обращаетесь к элементам, разделите на блоки, делайте отступы логические (пустые строки) между блоками кода, чтоб было понятнее.
С табуляцией у Вас что-то...


Отредактировал Ваш код:

const
  header = document.querySelector('header'),
  logotip = document.getElementById('logotip'),
  registion = document.getElementById('registion'),
  vhod = document.getElementById('vhod'),
  block_panel_menu = document.querySelectorAll('#block_panel_menu')

function block_panel_menu_Height(height) {
  block_panel_menu.forEach(element => element.style.height = height + 'px')
}

// vhod.innerHTML = '<img style="width: 20px; height: 20px;" src="SiteImage/logo_vhod.svg">'
let logo_vhod = document.createElement('img')
logo_vhod.style.width = '20px'
logo_vhod.style.height = '20px'
logo_vhod.src = './SiteImage/logo_vhod.svg'

window.onscroll = () => {

  if (pageYOffset > 100) {
    header.style.height = '50px'

    logotip.style.opacity = '0'
    logotip.style.marginTop = '-20px'

    registion.style.display = 'none'

    vhod.appendChild(logo_vhod)
    vhod.style.background = 'none'
    vhod.style.width = '30px'

    PanelMenuLinks.style.background = 'none'
    PanelMenuLinks.style.zIndex = '-1'
    PanelMenuLinks.style.marginTop = '-45px'
    PanelMenuLinks.style.fontSize = '13px'
    PanelMenuLinks.style.color = '#fff'
    PanelMenuLinks.style.borderTop = '0px'

    block_panel_menu_Height(49)
    block_panel_menu_children.style.top = '10px'
  }
  else {
    header.style.height = '70px'

    logotip.style.marginTop = '0px'
    logotip.style.opacity = '1'

    registion.style.display = 'block'

    vhod.innerText = 'Регистрация'
    vhod.style.background = '#626262'
    vhod.style.width = '100px'

    block_panel_menu_Height(70)
    block_panel_menu_children.style.top = '20px'

    PanelMenuLinks.style.marginTop = '0px'
    PanelMenuLinks.style.background = '#E7E7E7'
    PanelMenuLinks.style.borderTop = '10px solid #fff'
    PanelMenuLinks.style.fontSize = '18px'
    PanelMenuLinks.style.color = '#000'
  }
}

Мои рекомендации (кроме тех, что я описал выше):

 Правильно использовать функции получения доступа к элементам HTML
 ID обычно даётся единственному элементу в документе, в остальных случаях используется класс
 Использовать innerText там где можно обойтись и без innerHTML
 Создавать элементы средствами JS, а не встраиванием HTML кода через innerHTML
 Пишите функции (пусть даже маленькие), если есть повторения в коде: так код будет и красивее и читабельнее и удобнее в использовании
 Давать классам и id русские имена типа vhod -- не самая лучшая идея. Используйте переводчик, чтобы перевести интересующие Вас названия на английский.
 Выберите способ именования переменных: либо block_panel_menu, либо blockPanelMenu. У Вас же встречаются оба варианта. В JavaScript принято использовать вариант, называемый Camel Case, то есть, второй вариант: blockPanelMenu.

Ну а так по мелочи: можно использовать одинарные кавычки ' вместо двойных ";
изучите стрелочные функции типа () => {} . Часто можно использовать именно их -- они и короче писать и не захламляют код лишними словами;
Слушатели событий можно записать короткой записью, например: window.addEventListener('scroll', функция) можно написать window.onscroll = функция (в большинстве случаев просто добавляется 'on' в начало названия события); Желательно писать в начале скрипта строчку 'use strict' -- строгий режим -- гугл расскажет о нём лучше меня

Задавайте вопросы, что не понятно, на всё отвечу!

Худший ответ:
1. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
2. Если элементы динамически не встраиваются, то поиск по class/id  желательно вынести за функцию
Сократить код можно примерно так
class Scrolling {
    offset = null;

    scrolls() {
        const isOffset = pageYOffset > 100 ? "offsetOne" : "offsetSecond";
        if (this.offset != isOffset) {
            this[isOffset]({
                registion: document.querySelector("#registion"),
                vhod: document.querySelector("#vhod"),
            });
            this.offset = isOffset;
        }
    }

    offsetOne({ registion, vhod }) {
        registion.style.display = "none";
        vhod.style.cssText = "background:none;width:30px";
        vhod.innerHTML = "<img style='width: 20px; height: 20px;' src='SiteImage/logo_vhod.svg'>";
        PanelMenuLinks.style.cssText = "background:none;z-index:-1;margin-top:-45px;font-size:13px;color:#fff;border-top:0;";
        block_panel_menu_children.style.top = "10px";
        //block_panel_menu - заменить на класс.
        document.querySelectorAll("#block_panel_menu").forEach((item) => (item.style.height = "49px"));
        document.querySelector("#logotip").style.cssText = "opacity: 0;margin-top:-20px;";
        document.querySelector("header").style.height = "50px";
    }

    offsetSecond({ registion, vhod }) {
        registion.style.display = "block";
        vhod.style.cssText = "background:#626262;width:100px";
        vhod.innerHTML = "Регистрация";
        PanelMenuLinks.style.cssText = "background:#E7E7E7;margin-top:0px;font-size:18px;color:#000;border-top:10px solid #fff;";
        block_panel_menu_children.style.top = "20px";
        //block_panel_menu - заменить на класс.
        document.querySelectorAll("#block_panel_menu").forEach((item) => (item.style.height = "70px"));
        document.querySelector("#logotip").style.cssText = "opacity:1;margin-top:0px;";
        document.querySelector("header").style.height = "70px";
    }
}
const scroll = new Scrolling();
window.addEventListener("scroll", scroll.scrolls.bind(scroll), false);