web-dev-qa-db-fra.com

Affixe Bootstrap ne conservant pas la disposition des colonnes

Lorsque je fais défiler l'écran vers le bas dans mon navigateur (chrome), la colonne de droite est poussée complètement à gauche, ma barre latérale est poussée à l'arrière-plan et tout le contenu du côté droit est au-dessus de la barre latérale gauche. 

Cela ne se produit que lorsque j'applique les propriétés d'affixe à ma barre latérale div. 

Si vous remarquez que, dans des situations normales, la page est rendue sans problème, comme vous pouvez le voir ci-dessous: enter image description here

Cependant, lorsque je fais défiler l'écran vers le bas, voici à quoi ça ressemble: enter image description here

Pour votre référence, voici comment j'applique l'affix div:

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

Voici un lien vers JS Fiddle, pour que vous puissiez voir le problème en direct:

Voici un violon JS pour vous de voir l'erreur:

http://jsfiddle.net/fH46S/2/

Comment puis-je réparer cela?

jquerycsstwitter-bootstrapaffix
15
ILikeTacos

Il y a plusieurs choses qui se passent ici. Le premier problème est que vous essayez d'utiliser l'échafaudage de Bootstrap en conjonction avec sa fonctionnalité d'affixe. Vous remarquerez que sur les écrans plus petits, la fonction affixe est toujours active et lorsque vous faites défiler l'écran, elle se superpose au-dessus de la section des résultats.

Vous pouvez résoudre ce problème en ajoutant un conteneur DIV en dehors de l'élément #myAffix, puis en utilisant position: relative !important; en conjonction avec une requête multimédia définie à 1200px pour désactiver la fonction d'affichage des périphériques avec une petite largeur d'écran.

La deuxième chose qui se passe est la position fixe de votre élément apposé est hors de position. Sortir

#myAffix{
    left: 0px;
}

et ajouter

.affix{
    top: 0px !important;
}

Vous avez maintenant une barre de navigation fixe sur le côté gauche qui fonctionne de manière transparente avec le reste de la page.

Pour tout voir ensemble, consultez le exemple de violon mis à jour

6
Lloyd Banks

Voici quelque chose pour vous aider à démarrer: http://jsfiddle.net/panchroma/H2KU7/

Il a encore besoin d'être peaufiné, mais l'essentiel est terminé. La clé de ce problème est que lorsque vous utilisez affix, Bootstrap JS applique la classe de .affix à la div que vous espionnez après le nombre de défilements défini. Cette classe d'affixe a le css 

position:fixed;

ce qui empêche la div de défiler. Cela supprime également la division du flux normal, raison pour laquelle vous obtenez le chevauchement. 

Ma solution consistait à envelopper une nouvelle division autour de la barre de gauche et à lui appliquer le comportement d'affixe. Votre code d'origine supprimait le <div class="col-lg-3"> du flux normal, ce qui était à l'origine du problème. 

HTML 

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->

MODIFIER
Pour affiner votre css pour le comportement de la colonne de gauche lorsqu’elle est apposée, ciblez la colonne de gauche avec quelque chose comme: 

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

J'espère que cela t'aides!

7
David Taiaroa

Définissez deux presque la même barre de navigation. L'un d'eux a class = "navbar navbar-fixed-top", id = "nav_first" et style = "Visibilité: masqué;" . Le second a class = "navbar" et id = "nav_second". À l'exception de ces différences, ces barres de navigation sont totalement identiques.

Ajoutez également ce code js à la page.

$(document).ready(function(){
        console.log("document is ready");

        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{

                $("#nav_first").css("visibility","hidden");
            }
        });

    });
0
mustafa kemal tuna