Dev Faq
0
votes

Comment garder le contenu sous la barre de navigation collante lorsque je clique sur certaines section de la page?

Lorsque je clique sur une section de la page liée dans la barre NAVBAR, le titre de cette section est inférieur à la barre de navigation collante. de
Comment conserver le titre et le reste du contenu sous la barre NAV sticky de telle sorte que le titre et le contenu ne se cache pas sous la barre de navigation collante.

code HTML: p> 

    #nav-container{
        border-bottom: solid 1px black;
        width: 100%;
        background: #1c1b1b;
        position: sticky;
        top: 0;
        height: 100px;
        padding-top: 50px;
    }

    nav{
        display: inline-block;
        margin: auto;
        max-width: 100vw;
        width: 100%;
        align-items: center;
        text-align: center;
        float: center;

    }

    nav > ul{
        display: inline-block;
        margin: 0;
        justify-content: center;
    }

    nav > ul >.nav-btn>li{
        padding: 0px;
        margin-bottom: 0px;
        font-size:17px;
        list-style-type: none;
        padding:10px 0px;
        cursor: pointer;
        height: 44px;
        color: white;

    }

    .nav-btn{
        background-color: #1c1b1b;
        border: none;
        border: solid 2px white;

    }

    .nav-btn:hover{ 
        background-color: white;
        transition: 0.3s;
        transition-timing-function: ease-in-out;
    }
    a:hover{
        color: black;
    }
    a{
        text-decoration: none;
        color: white;
        padding: 10px 35px;
    }

    #content{
        width: 60%;
        margin: auto;
        text-align: center;
        font-size: 2em;
    }

0 commentaires

4 Réponses :

0
votes

Pour empêcher le contenu d'être caché sous une barre de navigation collante, vous devez ajouter Margin-top égal à la hauteur de votre barre NAV sur le #content div: < Pré> xxx

0 commentaires
0
votes

Vous devez utiliser Scroll- Marge-top code> . (CSS -tricks exemple) em> mais cela ne fonctionne pas dans IE et Pre-Chrome Edge. Si vous allez bien avec cela, continuez avec Scroll-Margin-top code>.

Mais sinon, pour une façon facile, vous pouvez ajouter du rembourrage et de la marge pour des sections telles que ceci: p> 

<div id="nav-container">
  <nav class="navbar">
    <ul>
      <button class="nav-btn"><li><a href="#lorem">Lorem</a></li></button>
      <button class="nav-btn"><li><a href="#ipsum">Ipsum</a></li></button>
      <button class="nav-btn"><li><a href="#dolor">Dolor</a></li></button>
      <button class="nav-btn"><li><a href="#sit">Sit</a></li></button>
    </ul>
  </nav>
</div>
<div id="content">
  <section id="lorem">
    <h1>Lorem </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="ipsum">
    <h1>Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="dolor">
    <h1>Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="sit">
    <h1>Sit</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</div>

0 commentaires
0
votes

Ajouter ce petit code JQuery pour obtenir ceci: https://jsfiddle.net/5bhqt6oz/ xxx

0 commentaires
0
votes

Vous pouvez obtenir cela en utilisant jQuery.

https://jsfiddle.net/9oynpdmj/ P> 

$(function() {
    $('ul.nav a').bind('click',function(event){
    event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 150
        }, 1000);
        event.preventDefault();
    });
});

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO