Блог

Главная - Вопросы по программированию - Чтобы боковая панель навигации оставалась неподвижной во время прокрутки

Чтобы боковая панель навигации оставалась неподвижной во время прокрутки

#html #css #flexbox

Вопрос:

Вот мой КОД:

 *,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/********* global styles *******/
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

/* header */
.header {
  display: flex;
  /* flex-direction: column; */
}

/* navbar */
.nav-bar {
  position: sticky;
}
.nav-wrap {
  min-width: 3rem;
  max-height: 100vh;
  display: flex;
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
}

.nav-header {
  display: flex;
  /* flex-direction: column; */

  max-width: 3.4rem;
  background: transparent;
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* align-content: center; */
}
.nav-toggle {
  margin: auto auto;
  /* align-self: center; */
  /* justify-self: center; */
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.45rem;
  cursor: pointer;
  transition: var(--mainTransition);
  margin-bottom: 10.5rem;
}

.nav-toggle:hover,
.nav-link:hover {
  transform: scale(1.2);
}

.nav-links {
  margin: auto auto;
  height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-link {
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--mainTransition);
}
/* hero */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
    url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
} 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- style -->

    <!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Културата Ще Спаси Света</title>
  </head>
  <body>
    <!-- header -->
    
    <header id="home" class="header">
      <!-- navbar -->
      <nav class="navbar">
        <div class="nav-wrap">
          <!-- nav header -->
          <div class="nav-header">
            <button
              type="button"
              class="nav-toggle"
              id="nav-toggle"
              aria-label="nav toggler"
            >
              <i class="fas fa-bars"></i>
            </button>
            <div class="nav-links">
              <i class="fas fa-volleyball-ball nav-link"></i>
              <i class="fas fa-paint-brush nav-link"></i>
              <i class="fas fa-music nav-link"></i>
              <i class="fas fa-pray nav-link"></i>
              <i class="fas fa-globe-americas nav-link"></i>
            </div>
            <!-- nav links -->
          </div>
        </div>
      </nav>

      <!-- hero -->
      <div class="hero">
      </div>
    </header>
    <section>More content<section>
  </body>
</html>

Вот как это выглядит сейчас

введите описание изображения здесь

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

Любая помощь была бы очень кстати.

Спасибо

Я добавляю это, потому что StackOverflow не позволил бы мне опубликовать это без дополнительной информации, которая, как я думаю, мне не нужна.

Комментарии:

1. Вы ищете position: fixed; на своей навигационной панели ?

2. Я попробовал, теперь это работает, но панель навигации перекрывает содержимое и содержимое, что я понял еще до того, как попробовал решение.

Ответ №1:

 *,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/********* global styles *******/
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

/* header */
.header {
  display: flex;
  flex-direction: column; 
  position:fixed;
  left:0;
  top:0;
}

/* navbar */
.nav-bar {
  position: sticky;
}
.nav-wrap {
  min-width: 3rem;
  max-height: 100vh;
  display: flex;
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
}

.nav-header {
  display: flex;
  /* flex-direction: column; */

  max-width: 3.4rem;
  background: transparent;
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* align-content: center; */
}
.nav-toggle {
  margin: auto auto;
  /* align-self: center; */
  /* justify-self: center; */
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.45rem;
  cursor: pointer;
  transition: var(--mainTransition);
  margin-bottom: 10.5rem;
}

.nav-toggle:hover,
.nav-link:hover {
  transform: scale(1.2);
}

.nav-links {
  margin: auto auto;
  height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-link {
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--mainTransition);
}
/* hero */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
    url("./imgs/hero.jpeg") center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
} 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- style -->

    <!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Културата Ще Спаси Света</title>
  </head>
  <body>
    <!-- header -->
    
    <header id="home" class="header">
      <!-- navbar -->
      <nav class="navbar">
        <div class="nav-wrap">
          <!-- nav header -->
          <div class="nav-header">
            <button
              type="button"
              class="nav-toggle"
              id="nav-toggle"
              aria-label="nav toggler"
            >
              <i class="fas fa-bars"></i>
            </button>
            <div class="nav-links">
              <i class="fas fa-volleyball-ball nav-link"></i>
              <i class="fas fa-paint-brush nav-link"></i>
              <i class="fas fa-music nav-link"></i>
              <i class="fas fa-pray nav-link"></i>
              <i class="fas fa-globe-americas nav-link"></i>
            </div>
            <!-- nav links -->
          </div>
        </div>
      </nav>

      <!-- hero -->
      <div class="hero">
      </div>
    </header>
    <section>More content<section>
  </body>
</html>

Комментарии:

1. Когда я запускаю ваш код, все ломается и выглядит как беспорядок

2. Я заставил его работать, но теперь навигационная панель перекрывает содержимое и содержимое, что я понял еще до того, как попробовал решение

Ответ №2:

Выньте навигацию из ЗАГОЛОВКА, поместите ее прямо под тегом ТЕЛА, используйте «положение: фиксированное; высота: 100%;» с помощью CSS.

Комментарии:

1. Переместите его после тега ЗАГОЛОВКА, если вы видите, что заголовок перекрывает его, или используйте «z-индекс: 1;» с помощью CSS.

2. Я попробовал, теперь это работает, но панель навигации перекрывает содержимое и содержимое, что я понял еще до того, как попробовал решение

3. Исправьте ширину панели навигации и используйте левое поле того же размера с элементом контейнера содержимого.

Метки: