要素の代わりに要素の内部を浮動させる要素を取得する方法

Question

javascriptを使用してdivの内側を浮遊している画像があります。 divは、長いスクロールのページの最初のセクションにあります。したがって、最初のdivで画像が跳ね返りますが、下にスクロールするとdivにとどまります。ユーザーがスクロールして画像がブラウザウィンドウから外れてブラウザウィンドウを参照として使用し、コードの下に表示されているコンテナdivではなく、画像をページの下に移動したいとします。

私はボディにdivを入れようとしましたが、javascriptと関係があると思います。

イメージは本質的にcontainer-fluidの中に閉じ込められています。そのコンテナから取り出し、スクリプトのxとyを$(window).width()に変更し、$（window）.width（）はトリックを行いません。あなたのようなCSSを設定する必要が

<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

：

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

Answer 2

私はただのimgのdivにpostion:fixedを入れて、それがトリックをしました。

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

}