Как автоматически изменить высоту и ширину при прокрутке div?

Question

Как я могу изменить height и width моего div автоматически и часто, когда прокручивается мой div?

HTML

<div id="contact" class="fadeInBlock"> 
    <div class="map"> 
     <div class="pointer"> 
      <div class="dot"></div> 
     </div> 
     <div class="address"> 
      <address></address> 
     </div> 
    </div> 
</div> 

(div, кто собирается изменить height и width является .pointer).

JS

$(function() { 
    $(window).load(function() { 
     $('.pointer').css({"width": "60px", "height": "60px"}); 
    }); 
}); 

Я только сделал изменения width и height часть, если не было достаточно ясно, пожалуйста, скажите мне, и я сделаю все возможное, чтобы очистить ваше замешательство.

Answer 1

JS

$(function() { 
    $(window).load(function() { 
     $('.pointer').css({'height':($(window).height())+'px'}); 
    }); 
}); 

Answer 2

Вот способ подпрыгивать ширину и высоту. Я бы сохранил точки анимации и несколько раз прокрутил анимацию.

Некоторые другие люди здесь предоставили вам стратегии для события прокрутки, но вы также попросили отскочить эффект.

Надеется, что это помогает, Тим

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("div").animate({ 
 
      opacity: '0.5', 
 
      height: '150px', 
 
      width: '150px' 
 
     }); 
 
     $("div").animate({ 
 
      opacity: '0.5', 
 
      height: '50px', 
 
      width: '50px' 
 
     }); 
 
     $("div").animate({ 
 
      opacity: '0.5', 
 
      height: '100px', 
 
      width: '100px' 
 
     }); 
 
     $("div").animate({ 
 
      opacity: '0.5', 
 
      height: '75px', 
 
      width: '75px' 
 
     }); 
 
     $("div").animate({ 
 
      opacity: '0.5', 
 
      height: '200px', 
 
      width: '200px' 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<button>Start Animation</button> 
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>