Voici ma structure HTML initiale (j'ai utilisé le framework Bootstrap)
<html>
<body>
<header>My header</div>
<div class="container-fluid">
<div class="row">
<div id="list" class="col-md-7"></div>
<div id="map" class="col-md-5"></div>
</div>
</div>
<footer>My Header</footer>
</body>
Et le css:
#list
{
height : 2500px /* For the exemple */
}
#map
{
height : 500px
}
#map.affix {
position: fixed;
top: 70px;
right: 0;
}
Au départ, ma position de div #map est relatif.
J'aimerais définir la position de div #map sur fixé lorsque le div (#map) devient visible à l'écran jusqu'au bas de div #list.
Et enfin, je voudrais mettre mon div à relatif position à nouveau lorsque mon div #map a atteint le bas de div #list.
Pour ce scénario, j'ai utilisé le plugin affixe de bootstrap:
$("#map").affix({
offset: { top: $("#map").offset().top }
});
MAIS lorsque mon rouleau atteint div #map, il disparaît de l'écran (car la position est fixe et la largeur de mon div # map est liquide)
Comment afficher la div #map avec la position fixe en haut / à droite de l’écran et avec ma taille initiale (quand elle est en position: relative)?
Est-ce que quelqu'un est une solution à ce problème? Merci pour votre aide!
Voici mon scénario souhaité:
Réponses:
0 pour la réponse № 1Est-ce que vous essayez de faire quelque chose comme ça?
http://jsfiddle.net/b43hj/3503/
<header>My Header</header>
<div class="container-fluid">
<div class="row">
<div id="list"></div>
<div id="theFixed">SOMETHING</div>
</div>
</div>
<footer>My Footer</footer>
#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;
}
#list {
height: 2500px;
width: 200px;
background: green;
}
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});