La Position d'un Div “Fixe” Verticalement " et “Absolue” Horizontalement dans une “Position:Relative” Conteneur Div

Je suis à la recherche d'un moyen pour que je puisse créer un div qui sera fixée sur la page verticalement, de sorte que si l'utilisateur fait défiler vers le bas, le div reste à la même place sur la page. Mais placé absolument horizontalement, de sorte que si l'utilisateur de l'écran est plus étroite que ma page, le défilement vers la droite ou la gauche ne sera pas causer de la div pour se déplacer à l'écran et, dans certains cas, rester soit à moitié visible sur le bord de l'écran ou la page complètement.

Cette div doit être dans une "Position:Relative" Div.

Je suis assez sûr il n'y a pas de moyen pour assigner les différentes positions de la variable de l'axe d'un div, mais c'est la meilleure façon de décrire l'effet dont je suis l'espoir de l'atteindre.

J'ai cette mesure, qui est fondamentalement juste un Fixe Div à l'intérieur d'une Relative Div.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

<div id="container">
<div id="blue-box"></div>
</div>

J'ai également créé un jsFiddle pour aider à démontrer le problème.

Cela fonctionne très bien pour la verticale, mais si vous redimensionnez votre navigateur internet de sorte qu'il est plus étroite que la zone jaune (conteneur) et puis faites défiler l'écran horizontalement, la boîte bleue se déplace avec la page. Je suis l'espoir d'empêcher ça.

Si il n'y a aucun moyen d'atteindre cet objectif par le CSS, je suis parfaitement d'accord pour l'utilisation de JavaScript aussi longtemps que cela fonctionne avec tous les navigateurs modernes et à la fois IE7 et IE8. (C'est pourquoi j'ai ajouté la balise JavaScript)

Quelqu'un peut-il m'aider?

OriginalL'auteur Flickdraw | 2011-11-30

  1. 16

    Avec JQuery, utilisez le scrollLeft() de la propriété du document! Ce serait le travail

    $(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

    Voir aussi

    http://jsfiddle.net/zhQkq/9/

    Bonne chance!

    Edit: Si vous voulez utiliser votre réglage de la marge gauche à la place d'un codée en dur "400", l'utilisation 

    $(window).scroll(function(event) {
   $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
    Merci pour la réponse, cela fonctionne très bien sur tous les navigateurs les plus récents! Malheureusement, il ne permet pas de résoudre le problème sur IE8. Est-il de toute façon à obtenir que cela fonctionne sur IE8?
    Ah, bonne prise. Il doit être $(windows).de défilement(...). Mise à jour de ma réponse!
    Génial choses. Cela fonctionne parfaitement maintenant, merci!
    Content d'avoir pu aider!
    Quelle merveilleuse correctif. Merci!

    OriginalL'auteur Willem Mulder

  2. 1

    De lier un #bleu-boîte de l'élément de la barre de défilement horizontale de la fenêtre à l'aide de la vanille javascript serait quelque chose comme ceci:

    var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
    bb.style.marginLeft = window.scrollX + 'px';
});

    Si elle disposait d'une marge définie initialement en px, n'oubliez pas d'enlever le " px " à partir de la fin de la chaîne, puis de convertir le texte en int avant l'ajout de la fenêtre.scrollX décalage. Ensuite, mettre le " px " retour sur la fin. Des fonctions comme String.replace() et parseInt() serait vous aider.

    Nice, merci pour ce détachement.

    OriginalL'auteur adjenks

  3. -2

    Voici ma solution (testé sous Opera et Firefox): http://jsfiddle.net/cCH2Z/2
    L'astuce consiste à spécifier right: 0px;, ce sera la position de la boîte 0px partir de la bordure droite de la fenêtre.

    Qui n'a pas de position de la div absolument à l'intérieur de la div conteneur sur l'axe horizontal. J'ai besoin de garder la boîte bleue au même point horizontalement à l'intérieur du conteneur. Donc, il va toujours rester à la marge gauche:400px; par rapport à la div conteneur. De sorte que lorsque l'utilisateur fait défiler horizontalement, la boîte bleue se déplace avec le conteneur.

    OriginalL'auteur Marijn van Vliet