Déplacer div avec position fixe si la taille de la fenêtre change

Comment puis-je effectuer les opérations suivantes:
J'ai besoin d'un div pour le changer de position lorsque la page est ouverte sur un petit écran ou de la fenêtre du navigateur, la taille est modifiée.
Le fixe div doit rester sur la même position verticale lorsque la page défile vers le haut ou vers le bas, mais j'ai aussi besoin d'être permet de dire 10px loin de la plus grande div(un conteneur pour les petits vrd, voir la photo s'il vous plaît). Maintenant, quand je redimensionner la fenêtre fixe div vient plus de la div à droite.

Donc la question est comment puis-je faire cela fixe div rester sur la même position lors du défilement de la page à la verticale et de le rendre toujours être 10px loin de la droite div? Classe Css pour fixe est:

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:100px;
    text-indent:-9999px;
}

En fait je suis en train de mettre en œuvre un "back to top" bouton, de sorte que le fixe div est ce bouton et le plus grand div contenu de la page.

Voici ce que j'ai maintenant:

Déplacer div avec position fixe si la taille de la fenêtre change

Vous pouvez essayer de changer la position de la div conteneur lui-même.
La Position de la bonne div relativement à la petite div
Je ne peux pas déplacer le conteneur div parce que c'est du contenu de la page et il est toujours centré
Eh bien , Si votre taille de la fenêtre est plus petite que la taille de la div conteneur ?
ensuite, une barre de défilement horizontale doit apparaître

OriginalL'auteur roman | 2012-12-19

  1. 3

    modifier votre css pour la faire ressembler à ceci:

    .fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:50%;
    margin-left: -[(maincontainerwidth/2) + 50];
    text-indent:-9999px;
}

    OriginalL'auteur anacarolinats

  2. 2

    Deux façons que je ferais:

    1) javascript personnalisé qui lit la largeur de la fenêtre et les modifications de votre css

    2) ou à l'aide d'une bibliothèque comme adapt.js afin de détecter et d'échange entre les .css

    Terme clé: Responsive Web Design

    Prendre un coup d'oeil à adapt.js son une bibliothèque javascript qui vous permettra de charger différents fichiers css en fonction de la taille de la fenêtre. Cette technique est idéale si vous voulez afficher des choses différentes entre disons mobiles et de bureau d'écran.

    Dans votre scénario, ce qui permettrait éventuellement de travailler aussi.

    1) Référence adapt.js

    <script src="/js/adapt.js" type="text/javascript></script>

    2) Configurer

    Donc, essentiellement, vous auriez deux points de vue:

    //Edit to suit your needs.
var ADAPT_CONFIG = {
  //Where is your CSS?
  path: 'assets/css/',

  //false = Only run once, when page first loads.
  //true = Change on window resize and page tilt.
  dynamic: true,

  //Optional callback... myCallback(i, width)
  callback: myCallback,

  //First range entry is the minimum.
  //Last range entry is the maximum.
  //Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = Narrow.css', //css for narrow views
    '760px  to 980px  = Narrow.css',
    '980px  to 1280px = Wide.css', //css for wide views
    '1280px to 1600px = Wide.css',
    '1600px to 1920px = Wide.css',
    '1940px to 2540px = Wide.css',
    '2540px           = Wide.css'
  ]
};

    3) en tout ressemblerait à

    <html>
    <head>
    ...

    <script src="/js/adapt.js" type="text/javascript></script>
    <script type="text/javascript>
        //Edit to suit your needs.
        var ADAPT_CONFIG = {
          //Where is your CSS?
          path: 'assets/css/',

          //false = Only run once, when page first loads.
          //true = Change on window resize and page tilt.
          dynamic: true,

          //Optional callback... myCallback(i, width)
          callback: myCallback,

          //First range entry is the minimum.
          //Last range entry is the maximum.
          //Separate ranges by "to" keyword.
          range: [
            '0px    to 760px  = Narrow.css', //css for narrow views
            '760px  to 980px  = Narrow.css',
            '980px  to 1280px = Wide.css', //css for wide views
            '1280px to 1600px = Wide.css',
            '1600px to 1920px = Wide.css',
            '1940px to 2540px = Wide.css',
            '2540px           = Wide.css'
          ]
        };
    </script>
    ...
    </head>
    <body>
            ...
    </body>
</html>
    Vous pouvez faire tout cela avec les media queries.
    oui mais le css3 n'a pas été spécifié. Je suis donc allé avec une solution qui ne serait pas besoin de html5/css3
    Bien sûr, rien de mal à cela.

    OriginalL'auteur Anicho

  3. 0

    Emballage!

    Je crois que le meilleur moyen de contrôler cela est d'utiliser un wrapper div. Donc, avoir quelque chose comme ceci:

    <div class="wrap">
    <!-- Contents -->
    <div class="fixed">
    </div>
</div>

    Maintenant ajouter avec le CSS:

    .wrap {width: [fixed width]; position: relative;}
.fixed {left: -100px;}

    Je me sens le wrapper div n'est pas nécessaire que le body lui-même est relatively positioned. En utilisant cette méthode, le div reste dans la même position.

    OriginalL'auteur Praveen Kumar Purushothaman