Как уменьшить ширину изображения в зависимости от положения прокрутки

Question

Я ищу, чтобы уменьшить логотип на основе свитка

До сих пор, у меня есть что-то вроде этого

logoSize = function(){ 
    var headerOffset = $(window).height() - 650; 
    var maxScrollDistance = 1300; 
    $(window).scroll(function() { 
     var percentage = maxScrollDistance/$(document).scrollTop(); 
     if (percentage <= headerOffset) { 
      $('.logo').css('width', percentage * 64); 
     } 
     console.log(percentage); 
    }); 
} 

logoSize(); 

я близко, но изображение начинает слишком широко или слишком быстро сжимается, мне нужно, чтобы это произошло для первых 650 пикселей прокрутки, как вы можете видеть - любые идеи? Может быть, процентная ширина будет лучше?

Answer 1

Я переписал ваш код на основании предположения о том, что у вас есть целевой размер, например. после прокрутки 650 пикселей вы хотите, чтобы ваше изображение было шириной 250 пикселей.

Он прокручивается плавно между нативным размером и целевого размером, и принимает во внимание тот факт, что высота окна может быть меньше максимальное расстояние прокрутки:

logoSize = function() { 
    // Get the real width of the logo image 
    var theLogo = $("#thelogo"); 
    var newImage = new Image(); 
    newImage.src = theLogo.attr("src"); 
    var imgWidth = newImage.width; 

    // distance over which zoom effect takes place 
    var maxScrollDistance = 650; 

    // set to window height if that is smaller 
    maxScrollDistance = Math.min(maxScrollDistance, $(window).height()); 

    // width at maximum zoom out (i.e. when window has scrolled maxScrollDistance) 
    var widthAtMax = 500; 

    // calculate diff and how many pixels to zoom per pixel scrolled 
    var widthDiff = imgWidth - widthAtMax; 
    var pixelsPerScroll =(widthDiff/maxScrollDistance); 

    $(window).scroll(function() { 
     // the currently scrolled-to position - max-out at maxScrollDistance 
     var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance); 

     // how many pixels to adjust by 
     var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll); 

     // calculate the new width 
     var zoomedWidth = imgWidth - scrollChangePx; 

     // set the width 
     $('.logo').css('width', zoomedWidth); 
    }); 
} 

logoSize(); 

См http://jsfiddle.net/raad/woun56vk/ для рабочего примера.