Wie man Element innerhalb des Körpers anstelle von Element float

Question

Ich habe ein Bild, das innerhalb eines div mit Javascript schwebt. Das div befindet sich im ersten Abschnitt einer Seite einer langen Bildlaufleiste. Also springt das Bild im ersten div herum, aber wenn ich nach unten scrolle, bleibt es in diesem div. Ich möchte, dass das Bild auf der Seite (im Körper) nach unten bewegt wird, während der Benutzer nach unten scrollt und das Bild vom Browserfenster zurückkehrt und das Browserfenster als Referenz verwendet, nicht das Container-Div wie unten im Code.

Ich habe versucht, das div in den Körper zu legen, aber ich denke, es hat mit dem Javascript zu tun.

das Bild ist im Wesentlichen innerhalb der container-fluid gefangen. Nehmen Sie es aus diesem Container und Ändern der X und Y des Skripts zu $(window).width() und $ (window) .width() tut nicht den Trick.

<div class="container-fluid"> 
     <div class="section-1-new"> 
      <li><img src="<?php echo get_template_directory_uri(); ?>/images/image.png"></a></li> 
     </div> 
</div> 

<script> 
$.fn.bounce = function(options) { 

    var settings = $.extend({ 
     speed: 10 
    }, options); 

    return $(this).each(function() { 

     var $this = $(this), 
      $parent = $this.parent(), 
      height = $parent.height(), 
      width = $parent.width(), 
      top = Math.floor(Math.random() * (height/2)) + height/4, 
      left = Math.floor(Math.random() * (width/2)) + width/4, 
      vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1), 
      vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1); 

     // place initialy in a random location 
     $this.css({ 
      'top': top, 
      'left': left 
     }).data('vector', { 
      'x': vectorX, 
      'y': vectorY 
     }); 

     var move = function($e) { 

      var offset = $e.offset(), 
       width = $e.width(), 
       height = $e.height(), 
       vector = $e.data('vector'), 
       $parent = $e.parent(); 

      if (offset.left <= 0 && vector.x < 0) { 
       vector.x = -1 * vector.x; 
      } 
      if ((offset.left + width) >= $parent.width()) { 
       vector.x = -1 * vector.x; 
      } 
      if (offset.top <= 0 && vector.y < 0) { 
       vector.y = -1 * vector.y; 
      } 
      if ((offset.top + height) >= $parent.height()) { 
       vector.y = -1 * vector.y; 
      } 

      $e.css({ 
       'top': offset.top + vector.y + 'px', 
       'left': offset.left + vector.x + 'px' 
      }).data('vector', { 
       'x': vector.x, 
       'y': vector.y 
      }); 

      setTimeout(function() { 
    move($e); 
}, 0); 

vectorX = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1), 
vectorY = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1); 

      }; 

     move($this); 
    }); 

}; 

$(function() { 
    $('.section-1-new li').bounce({ 
     'speed': 1.8 
    }); 
}); 

Answer 1

Sie müssen die CSS als solche setzen:

position: absolute; 
left: 50%; 
top: 50%; 

Answer 2

Ich habe nur postion:fixed auf dem img div und es hat den Trick.

.section-1-new li a img { 
     width: 420px; 
     height: auto; 
     z-index: 1000001; 
     position: fixed; 

}