Bootstrap: ancrages et marge supérieure du corps / rembourrage

Je suis en utilisant Bootstrap avec une barre de navigation fixe pour le haut du corps de la page.

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

J'ai ajouté un 40px de la marge du haut du corps pour le haut de page de contenu sous-jacent de ne pas être recouvertes par la barre de navigation.

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

Jusqu'à là, tout fonctionne bien. Je fais aussi de l'utilisation des ancres internes afin de faciliter la navigation à l'intérieur de la page, en utilisant les mêmes mécanismes de Twitter a été utilisé avec l'affixe composant sur le Bootstrap, documentation, l'utilisateur peut sauter par les différentes sections à l'intérieur de la page (voir http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">
    [...]
    [...]
    [...]
</section
<section id="section3">
    [...]
    [...]
    [...]
</section>

Mon problème est que lorsque l'utilisateur clique sur le navigateur des bâtons de la cible pour le très haut de l'écran, le contenu disparaît sous la barre de navigation. J'ai remarqué que Twitter a été utilisé un truc, la cible <section> les balises inclure un "padding-top: 30px;", le plus proche <h1> inclure un "margin-top: 10px;" directive CSS afin que le texte soit affiché exactement 40px dessous de la partie supérieure de l'écran.

Je ne peux pas me permettre de "perdre" 40px entre chaque section, mon écran doivent rester compact. Ma question est: est-il possible dans l'ordre interne des ancres ne pas coller à la partie supérieure de l'écran, mais de rester à l'écart à partir du haut de l'écran une longueur arbitraire?

source d'informationauteur MaxAuray

15

Enfin, j'ai compris comment facilement à résoudre ce problème:
```
body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}
```
Cela signifie un 40px marge est ajouté sur le dessus du corps, une 40px rembourrage est ajouté au-dessus des sections, l'une négative 40px marge est également ajoutée afin de passer respectifs prévus endroits, l'introduction d'un invisible marge pris en compte lorsque le navigateur attire l'affichage d'un article après une ancre est cliqué.

Espérons que cette aide.
5

De l'obtenir pour faire défiler jusqu'à la position correcte et d'avoir l'élément de menu sélectionné correcte lors du défilement de la page, vous devez définir padding-top: 40px; sur l'ancre, et de définir margin-bottom: -40px; sur le précédent frère de l'ancre.

Vous pouvez réaliser cela avec un JS extrait de code qui vous permettra de trouver les éléments de la valeur liquidative de menu et d'appliquer les changements au style.
```
$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});
```

Si votre application peut s'appliquer javascript puis le code javascript suivant fonctionne bien aussi:

function maybeScrollToHash() {
    if (window.location.hash && $(window.location.hash).length) {
        var newTop = $(window.location.hash).offset().top - $('.navbar-fixed-top').height() + parseInt($('body').css('padding-top'),10);
        $(window).scrollTop(newTop);
    }
}

$(window).bind('hashchange', function() {
maybeScrollToHash();
});

maybeScrollToHash();

C'est une légère modification de la réponse que l'on trouve ici: https://github.com/twbs/bootstrap/issues/193

La seule différence est que le code ci-dessus fonctionne sur le navbar-fixed-top classe.

Vous devez vous connecter pour publier un commentaire.