увеличение ширины при прокрутке вниз

227

28 сентября 2017, 14:04

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop) {
       $( window ).scroll(function() {
           $(".baloon1 img").css("width", "+=1px");  
       });
   } else {
       $( window ).scroll(function() {
           $(".baloon1 img").css("width", "+=-1px");  
       });
   }
   lastScrollTop = st;
});

состряпал из примеров вот такой код. по идеи он должен увеличивать ширину при прокрутке вниз и уменьшать при прокрутке вверх. но по факту только увеличивает. В чем может быть проблема?

Answer 1

Вот я немного поменял код и уже нормально работает, только здесь для наглядности меняю высотку каждый раз не на 1px а на 5px.

    var lastScrollTop = 0; 
    $(window).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { 
       var curWidth = parseInt($(".baloon1 img").css("width")); 
       delta = parseInt(event.originalEvent.wheelDelta || -event.originalEvent.detail); 
       if (delta <= 0) { 
           $( window ).scroll(function() { 
               $(".baloon1 img").css("width", (curWidth+5)+"px");   
           }); 
       } else { 
           $( window ).scroll(function() { 
               $(".baloon1 img").css("width", (curWidth-5)+"px");   
           }); 
       } 
    });

.baloon1{ 
      height: 600px; 
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <div class="baloon1"> 
      <img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/p/8/005/05c/36c/14dce05.jpg" width="400" /> 
    </div>