FRONTEND_MVC/views/_etc/header.php

<?php

use app\models\News; ?>
<header>
    <div class="header__top">
        <div class="header-top section" style="">
            <div class="header-top__wrapper section-wrapper section-wrapper_extra">
                <div class="header-top__banner">
                    <div class="header-banner">
                        <div class="header-banner_desktop">
                            <div id="adfox_163238655688285853" class=""></div>
                        </div>
                        <div class="header-banner_mobile">
                            <div id="adfox_163238723987728973"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-2 d-none d-lg-block">
                <div class="header-center__info">
                    <ul class="header-center__info-list">
                        <li class="header-center__info-item"><span class="header-center__info-link">16°, Барнаул</span></li>
                        <li class="header-center__info-item"><span id="USD" class="header-center__info-link header-center__info-link_down">$&nbsp;57.83</span></li>
                        <li class="header-center__info-item"><span id="EUR" class="header-center__info-link header-center__info-link_down">€&nbsp; 57.89</span></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6 col-md-8">
                <?=$this->render("stories")?>
            </div>
            <div class="col-md-4">
                <?=$this->render("/_etc/header/header_comments")?>
            </div>
        </div>
    </div>
    <div class="nav-cont">
        <div id="js-header-bottom-id" class="header__bottom js-header-bottom">
            <div class="header-bottom container">
                <div class="header-bottom__wrapper section-wrapper">
                    <main class="header-bottom__main">
                        <div class="header-bottom__logo"><a href="/" class="header-bottom__logo-link"><img src="/img/amic-logo.svg" width="91" height="28"></a></div>
                        <div class="header-bottom__nav">
                            <nav class="header-nav">
                                <ul class="header-nav__list">
                                    <li class="header-nav__item"><a href="/news" class="header-nav__link">
                                            Новости
                                        </a></li>
                                    <li class="header-nav__item"><a href="/articles" class="header-nav__link">
                                            Читай
                                        </a></li>
                                    <li class="header-nav__item"><a href="/podcasts" class="header-nav__link">
                                            Слушай
                                        </a></li>
                                    <li class="header-nav__item"><a href="/video" class="header-nav__link">
                                            Смотри
                                        </a></li>
                                </ul>
                            </nav>
                        </div>
                    </main>
                    <aside class="header-bottom__side">
                        <div class="header-bottom__buttons">
                            <div class="header-bottom__button">
                                <a href="https://fmprod.ru/radiostantsii/item/evropa-plyus/" target="_blank" class="button button_grey">
                                    <span class="button__text tg">▶ Слушать радио</span>
                                </a>
                            </div>
                            <div class="header-bottom__button">
                                <a href="https://t.me/news_amic" target="_blank" class="button button_grey button_grey-tg">
                                <span class="button__icon">
                                    <svg style="width: 17px;height: 14px;" class="icon icon-tg"><use xlink:href="/svg/symbol/sprite-styled.svg#tg"></use></svg>
                                </span>
                                    <span class="button__text tg">&nbsp;Телеграм-канал</span>
                                </a>
                            </div>
                        </div>

                    </aside>
                </div>
            </div>
        </div>
    </div>

</header>


<script>
    (function (){
        let header = document.getElementById("js-header-bottom-id");
        let height = header.offsetHeight;
        header.parentNode.style.height = height+"px";
        let position = header.offsetTop;
        window.onscroll = function (){
            if(window.scrollY>=position){
                if(!header.classList.contains("fixed")) header.classList.add("fixed");
            } else {
                if(header.classList.contains("fixed"))  header.classList.remove("fixed");
            }
        }
    })();

</script>