Как я могу сделать так, чтобы мой NavBar следовал за моей страницей при прокрутке? - PullRequest
Новая
       0

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

0 голосов
/ 09 февраля 2020

Я хотел бы иметь панель навигации, которая отображается при прокрутке. Проблема в том, что когда я ставлю фиксированное положение CSS, оно ничего не делает и исчезает с панели навигации. Если у вас есть интересующее меня решение.

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

.header
{
    height: 950px;
    width: 100%;
    background: gray;
    position: relative;
}

.header-texture
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    background: url('../img/bonjour.jpg') no-repeat center;
    background-size: cover;
    z-index: 1;
    
}

.container
{
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 999;
}

.header-navbar
{
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.header-navbar-menu-link
{
    margin-left: 40px;
    color: black;
    text-decoration: none;
    
}

.h-slogan-title
{
    text-align: center;
    margin-top: 200px;
}

/*TEST*/

.col-sm
{
    border: 2px solid;
    padding: 10px;
    margin: 10px;
    padding-bottom: 20px;
    border-radius: 20px;
}

.containere
{
    text-align: center;
    color: black;
}

img
{
    margin: 10px;
}

span
{
    color: #487eb0;
}

i
{
    padding-right: 10px;
}

/*HEADER*/

.card-deck
{
    margin-top: 200px;
}

.card-title
{
    color: white;
}

.card-text
{
    color: white;
}

/*----------------------------PARTIE2-------------------------------------*/

.header1
{
    height: 950px;
    width: 100%;
    position: relative;
}


.list-unstyled
{
    padding-top: 100px;
}
<!DOCTYPE html>
<html lang="fr">
 <!-- head -->
  <head>
    <meta charset="utf-8"/>
    <title>Top Framework</title>

    <!-- css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="src/css/style.css">
    <!-- css -->

   <!-- font -->
   <link href="https://fonts.googleapis.com/css?family=Alatsi&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Montserrat:700i&display=swap" rel="stylesheet">
   <script src="https://kit.fontawesome.com/6282f3433c.js" crossorigin="anonymous"></script>
   <!-- font -->



  </head>
  <!--Body-->
 <body>






 <div class="header">
   <div class="header-texture"></div>
   <div class="container">
     <div class="header-navbar">
       <div class="header-navbar-logo">
         <h1 class="header-navbar-logo-title"><img src="src/img/logo.svg.png" alt="logo" height="55" width="55">Les Fra<span>me</span>work</h1>
       </div>

<!--MENU-->
<div class="header-navbar-menu">
  <a href="#" class="header-navbar-menu-link"><i class="fas fa-home"></i>Home</a>
  <a href="#topframework" class="header-navbar-menu-link"><i class="fab fa-typo3"></i>Top Framework</a>
  <a href="#" class="header-navbar-menu-link"><i class="fab fa-atlassian"></i>About</a>
</div>


<!--MENU-->
</div>


<!--HAUT DE PAGE-->
<div class="card-deck">
<div class="card bg-dark" style="width: 18rem;">
  <img src="src/img/bootstrap.jpg"class="card-img-top w-50" alt="Logo de bootsrap">
  <div class="card-body">
    <h5 class="card-title">Bootsrap</h5>
    <p class="card-text">Bootstrap est un Framework très connue pour ses code facile et ses menu responsive.</p>
    <a href="https://getbootstrap.com/" target="_blank" class="btn btn-light">Bootstrap</a>
  </div>
</div>

<div class="card bg-dark" style="width: 18rem;">
  <img src="src/img/sementic.png"class="card-img-top w-50" alt="Logo de sementic">
  <div class="card-body">
    <h5 class="card-title">Semnetic UI</h5>
    <p class="card-text">Très bon Framework. Ses la concurence direct de Bootsrap.</p>
    <a href="https://semantic-ui.com/" target="_blank" class="btn btn-light">Sementic UI</a>
  </div>
</div>

<div class="card bg-dark" style="width: 18rem;">
  <img src="src/img/bootstrap.jpg"class="card-img-top w-50" alt="Logo de bootsrap">
  <div class="card-body">
    <h5 class="card-title">Skeleton</h5>
    <p class="card-text">Skeleton est un très bon Framework aussi car il ne compte que 400 ligne de code. Et vous donne le plus important pour votre page Web.</p>
    <a href="http://getskeleton.com/" target="_blank" class="btn btn-light">Skeleton</a>
  </div>
</div>
</div>

</div>
</div>
<!--HAUT DE PAGE-->


<!--PARTIE 2-->
<div class="header1">
  <div class="container-fluid">
  <div class="container">

    <ul class="list-unstyled">
      <li class="media">
       
        <div class="media-body">
          <h5 class="mt-0 mb-1" id="topframework">Top des Framework</id></h5>
          Ce top a été fait par un site, vous pouvez voir les autres top <a href="https://www.codeur.com/blog/front-end-framework/" target="_blank">ici</a>
        </div>
      </li>
      <li class="media my-4">
        
        <div class="media-body">
          <h5 class="mt-0 mb-1">Sementic UI</h5>
          Mise a jour. Effectivment Sementic UI a été mise a jour dernierment voici le patch <a href="https://semantic-ui.com/introduction/new.html" target="_blank">Patch détail</a>
        </div>
      </li>
      <li class="media">
        
        <div class="media-body">
          <h5 class="mt-0 mb-1">Si vous avez la flemme de télécharger</h5>
          Si vous ne voulez pas allez sur bootstrap pour télécharger leur pack CSS ect vous pouvez le faire ici <a href="https://getbootstrap.com/docs/4.4/getting-started/download/" target="_blank" class="btn btn-warning">Télécharger</a>
        </div>
      </li>
    </ul>

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


<!--PARTIE 2-->
























<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
 <!-- body -->
</html>

Ответы [ 2 ]

2 голосов
/ 09 февраля 2020

Я не совсем понял ваше требование, я полагаю, вы хотели липкий navbar. Если это то, что вы ищете, все, что вам нужно сделать, это: 

    .header-navbar{
       position: fixed;
       top: 0;
       z-index: 1030; /* to prevent the navbar getting covered up by other content */
    }

Полный код 

 .header {
        height: 950px;
        width: 100%;
        background: gray;
        position: relative;
    }

    .header-texture {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../img/bonjour.jpg') no-repeat center;
        background-size: cover;
        z-index: 1;

    }

    .container {
        width: 90%;
        margin: auto;
        position: relative;
        z-index: 999;
    }

    .header-navbar {
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position:fixed;
        top:0;
        z-index: 1030; /* to prevent the navbar getting covered up by other content */
    }


    .header-navbar-menu-link {
        margin-left: 40px;
        color: black;
        text-decoration: none;

    }

    .h-slogan-title {
        text-align: center;
        margin-top: 200px;
    }

    /*TEST*/

    .col-sm {
        border: 2px solid;
        padding: 10px;
        margin: 10px;
        padding-bottom: 20px;
        border-radius: 20px;
    }

    .containere {
        text-align: center;
        color: black;
    }

    img {
        margin: 10px;
    }

    span {
        color: #487eb0;
    }

    i {
        padding-right: 10px;
    }

    /*HEADER*/

    .card-deck {
        margin-top: 200px;
    }

    .card-title {
        color: white;
    }

    .card-text {
        color: white;
    }

    /*----------------------------PARTIE2-------------------------------------*/

    .header1 {
        height: 950px;
        width: 100%;
        position: relative;
    }


    .list-unstyled {
        padding-top: 100px;
    }
<!DOCTYPE html>
<html lang="fr">
<!-- head -->

<head>
    <meta charset="utf-8" />
    <title>Top Framework</title>

    <!-- css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="src/css/style.css">
    <!-- css -->

    <!-- font -->
    <link href="https://fonts.googleapis.com/css?family=Alatsi&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700i&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6282f3433c.js" crossorigin="anonymous"></script>
    <!-- font -->



</head>
<!--Body-->

<body>
    <div class="header">
        <div class="header-texture"></div>
        <div class="container">
            <div class="header-navbar">
                <div class="header-navbar-logo">
                    <h1 class="header-navbar-logo-title"><img src="src/img/logo.svg.png" alt="logo" height="55"
                            width="55">Les Fra<span>me</span>work</h1>
                </div>

                <!--MENU-->
                <div class="header-navbar-menu">
                    <a href="#" class="header-navbar-menu-link"><i class="fas fa-home"></i>Home</a>
                    <a href="#topframework" class="header-navbar-menu-link"><i class="fab fa-typo3"></i>Top
                        Framework</a>
                    <a href="#" class="header-navbar-menu-link"><i class="fab fa-atlassian"></i>About</a>
                </div>


                <!--MENU-->
            </div>


            <!--HAUT DE PAGE-->
            <div class="card-deck">
                <div class="card bg-dark" style="width: 18rem;">
                    <img src="src/img/bootstrap.jpg" class="card-img-top w-50" alt="Logo de bootsrap">
                    <div class="card-body">
                        <h5 class="card-title">Bootsrap</h5>
                        <p class="card-text">Bootstrap est un Framework très connue pour ses code facile et ses menu
                            responsive.</p>
                        <a href="https://getbootstrap.com/" target="_blank" class="btn btn-light">Bootstrap</a>
                    </div>
                </div>

                <div class="card bg-dark" style="width: 18rem;">
                    <img src="src/img/sementic.png" class="card-img-top w-50" alt="Logo de sementic">
                    <div class="card-body">
                        <h5 class="card-title">Semnetic UI</h5>
                        <p class="card-text">Très bon Framework. Ses la concurence direct de Bootsrap.</p>
                        <a href="https://semantic-ui.com/" target="_blank" class="btn btn-light">Sementic UI</a>
                    </div>
                </div>

                <div class="card bg-dark" style="width: 18rem;">
                    <img src="src/img/bootstrap.jpg" class="card-img-top w-50" alt="Logo de bootsrap">
                    <div class="card-body">
                        <h5 class="card-title">Skeleton</h5>
                        <p class="card-text">Skeleton est un très bon Framework aussi car il ne compte que 400 ligne de
                            code. Et vous donne le plus important pour votre page Web.</p>
                        <a href="http://getskeleton.com/" target="_blank" class="btn btn-light">Skeleton</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--HAUT DE PAGE-->


    <!--PARTIE 2-->
    <div class="header1">
        <div class="container-fluid">
            <div class="container">

                <ul class="list-unstyled">
                    <li class="media">

                        <div class="media-body">
                            <h5 class="mt-0 mb-1" id="topframework">Top des Framework</id>
                            </h5>
                            Ce top a été fait par un site, vous pouvez voir les autres top <a
                                href="https://www.codeur.com/blog/front-end-framework/" target="_blank">ici</a>
                        </div>
                    </li>
                    <li class="media my-4">

                        <div class="media-body">
                            <h5 class="mt-0 mb-1">Sementic UI</h5>
                            Mise a jour. Effectivment Sementic UI a été mise a jour dernierment voici le patch <a
                                href="https://semantic-ui.com/introduction/new.html" target="_blank">Patch détail</a>
                        </div>
                    </li>
                    <li class="media">

                        <div class="media-body">
                            <h5 class="mt-0 mb-1">Si vous avez la flemme de télécharger</h5>
                            Si vous ne voulez pas allez sur bootstrap pour télécharger leur pack CSS ect vous pouvez le
                            faire ici <a href="https://getbootstrap.com/docs/4.4/getting-started/download/"
                                target="_blank" class="btn btn-warning">Télécharger</a>
                        </div>
                    </li>
                </ul>

            </div>

        </div>
    </div>


    <!--PARTIE 2-->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>
<!-- body -->

</html>
1 голос
/ 09 февраля 2020

position: fixed работает хорошо, но вам просто нужно внести некоторые корректировки, как указано ниже 

.header-navbar {
     position:fixed;
     top:0;
 }

, затем удалить margin для card-deck и вместо этого использовать отступы, чтобы оставить пустое пространство под областью навигации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...