Как я могу сделать меню в верхней части при прокрутке

Я хотел бы создать меню, которое фиксируется в верхней части страницы во время прокрутки. Что-то вроде верхнего меню в Facebook.

Кроме того, я хочу, чтобы div держал логотип с плавающей запятой слева от строки меню, а навигатор плавал справа от строки меню.

Ответы

Ответ 1

Это должно начаться.

 <div class="menuBar">
        <img class="logo" src="logo.jpg"/>
        <div class="nav"> 
            <ul>
                <li>Menu1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul> 
        </div>
    </div>



body{
    margin-top:50px;}
.menuBar{
    width:100%;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    }
.logo{
    float:left;
    }
.nav{
    float:right;
    margin-right:10px;}
.nav ul li{
    list-style:none;
    float:left;
    }

Ответ 2

 #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

    #content {
        position:static;
        margin-top:100px;
    }

Ответ 3

чтобы установить div в фиксированном положении, вы можете использовать

position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */

Ответ 4

Тег postition:absolute; позиционирует элемент относительно его непосредственного родителя. Я заметил, что даже в примерах нет места для прокрутки, и когда я это пробовал, это не сработало. Поэтому, чтобы вытащить плавающее меню facebook, вместо него следует использовать тег position:fixed;. Он перемещает/удерживает элемент в заданном/заданном месте, а остальная часть страницы может плавно прокручиваться - даже с отзывчивыми.

Пожалуйста, просмотрите документацию атрибутов CSS, если вы можете:)