J'ai besoin de l'élément verticalement au milieu de l'écran lorsque le bouton est cliqué, et peu importe la façon dont la hauteur du navigateur est réglée, il sera toujours au milieu.

 <html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <button id="button">click me</button>
    <div id="element">balah</div>
    </html>


<style>
#element{
    position: fixed;
    color: red;
}
</style>

J'ai essayé:

<script>
$("#button").click(function(){
    $('#element').css('margin-top',$(window).innerHeight()/2);

})
</script>
0
badbye 7 août 2016 à 22:25

3 réponses

Meilleure réponse

Pas besoin d'utiliser JS, cela peut être fait avec du CSS pur;

.fixed {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
1
powerbuoy 7 août 2016 à 21:30

Vous devez calculer la position sur l'écran en tenant compte de l'élément aussi ...

function FixDivCtrl() {
  var btn = $('#test');
  var target = $('#element');
  
  btn.click(function() {
    var coords = {
      "margin-top": target.height() / -2,
      "margin-left": target.width() / -2,
      "position": "fixed",
      "left": "50%",
      "top" : "50%"
    };
    target.css(coords);
  });
}

jQuery(document).ready(FixDivCtrl);
div {
  background-color: red;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test">Make it Fixed</button>

<div id="element"></div>
1
Hitmands 7 août 2016 à 19:31

Créez une classe cuss avec Top, l, r, b réglé sur 0px, margin: auto et position fixed.

Non testé, mais vous pouvez utiliser addClass et removeClass pour ajouter la nouvelle classe cuss.

Par exemple: $ (votre-élément) .addClass ("centre");

div.center {
  background-color: red;
  width: 50px;
  height: 50px;
  Top:0px;
  left:0px;
  right:0px;
  Bottom:0px;
  Position:fixed;
  Margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test">Make it Fixed</button>

<div id="element"></div>
1
Javier Godoy Magaña 7 août 2016 à 21:23