Affixe Bootstrap et conflit overflow-y

Question

Le problème que je rencontre actuellement concerne Twitter bootstraps affix et css overflow-y.

Les détails

je une barre de navigation bootstrap de pixel 41 fixé à la partie supérieure et inférieure (utilisé pour tête/pied).

div.container-fluid est utilisé en tant que corps de contenu principal. J'utilise position: absolute pour le positionner entre l'en-tête et le pied de page et j'ai overflow-y: scroll pour le faire défiler à travers le contenu débordé.

div.side-bar est utilisé comme navigation latérale sur le côté gauche de la page et est imbriqué dans un div.span3. J'utilise jquery pour appeler l'affixe sur le côté nav.

Le problème

Quand j'ajoute overflow-y: scroll au div.container-fluid je reçois le défilement au bon endroit ... mais l'affixe n'est pas appliquée (sur la base des actions)

Mais quand je supprimer overflow-y: scroll tout à fait, la barre de défilement s'étend à la page entière (et pas seulement le div.container-fluid) mais l'affixe s'applique.

Voici deux liens vers un avec trop-plein-y et un sans trop-plein-y

Aucun Affix effethttp://jsfiddle.net/VincentWilkie/YRxkU/

affixe effet avec un mauvais défilementhttp://jsfiddle.net/VincentWilkie/cKJV2/

J'ai besoin si que la barre de défilement ne s'étend pas dans l'en-tête et pied de page: (

Merci pour toute aide!

Vincent Wilkie

Answer 1

Vous avez juste besoin d'ajouter data-spy="affix" au # barre latérale div. Voici un exemple de travail:

http://jsfiddle.net/skelly/YRxkU/2/

Answer 2

j'ai pu trouver une solution qui a fonctionné pour moi. J'ai fini par utiliser .affix ({offset: {x: 10, top: 20}}) pour le positionner correctement.

Je supprime également le trop-plein.

Merci!