Как мне добиться, чтобы панель навигации отображалась в верхней части экрана при прокрутке?

ProgramBox

Как мне добиться, чтобы панель навигации отображалась в верхней части экрана при прокрутке?

Post author:admin
Запись опубликована:19 октября, 2022
Post category:Вопросы по программированию

#html #css #position #nav #sticky

#HTML #css #положение #навигация #липкий

Вопрос:

Я пытаюсь использовать overflow: sticky; чтобы моя панель навигации останавливалась в верхней части экрана при прокрутке, но ничего не меняла, я видел, как люди говорят, чтобы установить поля и отступы на ul равными 0, что я и сделал, но без изменений, я также попытался избавиться от переполнения: скрыто, но это избавляет от цвета фона панели. HTML и CSS ниже.

HTML

 <!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="Assets/css/site.css">
</head>
<body>
    <header>
        <img src = "Assets/images/Header1.jpg" id = "headImage">

        <nav id = "navBar">
            <ul>
                <li><a href = "index.html" class = "active">Home</a></li>
                <li><a href = "weapons.html">Weapons</a></li>
                <li><a hred = "maps.html">Maps</a></li>
                <li><a href = "modes.html">Modes</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
        
    </header>


    
    <footer>

    </footer>
</body>

CSS

 body{
    background-color: rgb(43, 23, 23);
    padding: 0;
    margin: 0;
    height: 1000px;
}

.active{
    background-color: rgb(31, 31, 31);
}

#headImage{
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 50% 50%;
}

#navBar ul{
    list-style-type: none;
    overflow: hidden;
    background-color: rgb(20, 20, 20);
    padding: 0;
    margin: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

#navBar li{
    float: left;
}

#navBar a{
    display:block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navBar a:hover{
    background-color: rgb(31, 31, 31);
}

1. вам не нужно использовать webkit for sticky . Sticky по умолчанию поддерживается всеми браузерами, кроме IE. Не используйте float для целей стилизации. Его hsould использоваться только для плавающих изображений в pargraph. вы можете либо использовать flexboxes , либо просто объявить элемент списка равным be inline и выровнять его text-align . Используйте position: sticky; на самой панели, а не на ul .

Ответ №1:

Множество исправлений вашего кода, которые не обязательно имеют какое-то отношение к вашему коду.

Обязательно:

удалите -webkit-sticky; , поскольку это бесполезно. Firefox поддерживает sticky быть по умолчанию, как и любой другой браузер, за исключением IE. Использование -webkit- устарело уже много лет.
они sticky должны применяться к navbar самому себе, а не только к списку.
Панель навигации должна быть исключена из заголовка. Если это дочерний элемент header , он будет вынужден оставаться внутри дочернего элемента и поэтому будет удален с экрана.

Необязательно:

использование float для целей стилизации не только устарело, но и никогда не существовало. Многие неправильно использовали его из-за его фактического назначения. Его следует использовать только для плавающих изображений внутри абзаца. Для этого разделите список просто как inline-block . Затем его можно выровнять text-align .

 body {
  background-color: rgb(43, 23, 23);
  padding: 0;
  margin: 0;
  height: 1000px;
}

.active {
  background-color: rgb(31, 31, 31);
}

#headImage {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 50%;
}

#navBar {
  position: sticky;
  top: 0;
}

#navBar ul {
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
  padding: 0;
  margin: 0;
}

#navBar li {
  display: inline-block;
}

#navBar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar a:hover {
  background-color: rgb(31, 31, 31);
}

 <header>
  <img src="Assets/images/Header1.jpg" id="headImage">
</header>
<nav id="navBar">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="weapons.html">Weapons</a></li>
    <li><a hred="maps.html">Maps</a></li>
    <li><a href="modes.html">Modes</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>



<footer>
</footer>

Развернуть фрагмент

1. О, большое спасибо, я не знал, что вы можете выполнять выравнивание текста. Поплавок плавил мой мозг, лол. Кроме того, только сейчас обнаружена проблема с заголовком, большое спасибо за помощь.

2. есть ли какой-либо способ определить высоту строки состояния устройства (например, строки состояния Android для Chrome), чтобы мы могли знать, какое значение использовать для top? я боролся с тем, что строка состояния мешала. использование angular . пробовал использовать css в js коде, но безрезультатно.

3. @domster это совершенно другой вопрос. Кроме того, строка состояния — это часть операционной системы, а не часть браузера. Как таковой он не является частью области просмотра (поскольку он находится за пределами браузера). Невозможно определить ее высоту, изменить ее или скрыть. Как уже было сказано, это не часть браузера, а функция ОС. Ни в коем случае нельзя перезаписывать ее.

4. @tacoshy спасибо за ваш ответ! да, вы правы в этом. странно, как большинству веб-сайтов удается красиво размещать навигационную панель под строкой состояния (у Android есть эта проблема, с iOS все в порядке). однако моя панель наполовину закрыта строкой состояния. я пытался использовать top и некоторые цифры, которые я получил от stackoverflow, но безрезультатно. есть ли у вас какие-либо рекомендации по решению этой проблемы? для контекста я впервые пытаюсь внести свой вклад в OSS. большое вам спасибо !! 🙂

Ответ №2:

Простое удаление изображения и ul из заголовка заставило его работать.