Из Вертикального меню сделать горизонтально при прокрутке (фиксированное)

@GEORGE001 · Регистрация: 05.01.2018

Author24 — интернет-сервис помощи студентам

Такая проблема, есть у меня вертикальное меню из 3 пунктов, есть логотип и некоторые контакты. Все это на главном экране.
Как всунуть лого, контакты и меню в горизонтальное фиксированное меню при прокрутке. Я только начинаю разбираться с этой проблемой, но пока не очень получается.

HTML5

        <ul class="main-menu">
            <li><a href="javascript://0" onclick="slowScroll ('#offers')">Услуги</a></li>
            <li><a href="#portfolio">Портфолио</a></li>
            <li><a href="javascript://0" onclick="slowScroll ('#contacts')">Контакты</a></li>
        </ul>
    <div class="container clearfix">
        <div class="mail_header">info@mysite.com<br> +0000000000<br> +0000000000</div>
        <a href="index.php"><img src="img/logotype.png" alt="logo" class="logo"></a>

CSS

.logo{
    display: block;
    position: absolute;
    margin-left: 40%;
    height: 300px;
    width: auto;
    margin-top: 120px;
    cursor: pointer;
}
.mail_header{
    right: 0;
    position: absolute;
    margin-top: 2%;
    font-family: GothamProRegular;
    font-size: 15px;
    color: #e7e7e7;
}
.main-menu{
    list-style: none;
    position: absolute;
    margin-top: 120px;
}
.main-menu li{
    margin-top: 4px;
    margin-left: -35px;
    border-radius: 35px;
    text-align: center;
    vertical-align: center;
    border: 2px solid white;
    height: 40px;
    width: 220px;
    transition: .2s ease;
}
.fixed{
    display: flex;
    position: fixed;
    top: 0;
    background: #000;
}
.main-menu a{
    padding: 5px 0 0 0;
    font-family: GothamProRegular;
    font-size: 18px;
    display: block;
    text-decoration: none !important;
    color: #fff;
    text-transform: uppercase;
}
.main-menu a:hover{
    color: #141414;
}
.main-menu li:hover{
    margin-left :-15px;
    background-color: #fff;
    transition: .2s ease;
}

Javascript

$(document).scroll (function(){
    if($(document).scrollTop()>$('header').height()+10)
        $('.main-menu').addClass('fixed');
    else
        $('.main-menu').removeClass('fixed');
});

@GEORGE001 · 04.05.2018, 12:53 **[ТС]**

Вот так выглядит главный экран на данный момент

@boilzzz · 04.05.2018, 17:53

GEORGE001, Так а в чем проблема? наверное потому что у вас нет header? так укажите просто число за место высчитываниее ее. я в условие сделал 100 пикселей вы подберите себе сколько надо.

Javascript

$(document).scroll (function(){
    if($(document).scrollTop()>100){
        $('.main-menu').addClass('fixed');
}else{
        $('.main-menu').removeClass('fixed');
}
});

@GEORGE001 0 / 0 / 2 Регистрация: 05.01.2018 Сообщений: 57
	04.05.2018, 12:53 [ТС]	2
	Вот так выглядит главный экран на данный момент Миниатюры 0

	04.05.2018, 17:53