Изменение высоты изображения jQuery на прокрутке

У меня есть фиксированный заголовок на моем веб-сайте, и я пытаюсь изменить размер логотипа при прокрутке вниз до определенной точки, а затем увеличивать по мере прокрутки вверх. При прокрутке изображение перестанет уменьшаться, когда оно достигнет половины его первоначальной высоты. Это то, что я пробовал, но не работал. Благодарю.Изменение высоты изображения jQuery на прокрутке

jQuery(window).scroll(function() { 

var windowScroll = jQuery(window).scrollTop(), 
    imageHeight = jQuery('.headlogo').css('height'), 
    marginHeight = jQuery('.nav.navbar').css('margin-top'), 
    newMargin = marginHeight - windowScroll, 
    newHeight = imageHeight - windowScroll, 
    stopHeight = imageHeight/2; 

    jQuery('.headlogo').css("height", newHeight); 
    jQuery('nav.navbar').css("margin-top", newMargin); 

    if(newHeight == stopHeight){ 
     jQuery('.headlogo').css("height", stopHeight); 
    } 
});

источник

2013-12-20 Tim Wilkinson

вы можете попробовать что-то вроде этого [http://jsfiddle.net/xhLhY/](http://jsfiddle.net/xhLhY/), но если событие прокрутки переместить некоторые 100 пикселей при вы не можете получить тот же эффект –

@AbrahamUribe thats только то, что я был после спасибо. Если вы опубликуете ответ, я могу принять его. –

вам нужно, чтобы получить ImageHeight и marginHeight вне события прокрутки, подобного этому

//get original height and margin-top outside scroll  
var imageHeight = parseInt($('.headlogo').css('height')), 
    stopHeight=imageHeight/2, 
    marginHeight = parseInt($('.navbar').css('margin-top')) 
    stopMargin=marginHeight/2; 

$(window).scroll(function(e) { 
    var windowScroll = $(window).scrollTop(), 
     newMargin = marginHeight - windowScroll, 
     newHeight = imageHeight - windowScroll; 
    if(newHeight>=stopHeight){ 
     $('.headlogo').css("height", newHeight); 
     $('.navbar').css("margin-top", newMargin); 
    } 
    else{ 
     $('.headlogo').css("height", stopHeight);//if it scroll more set to stopHeight 
     //you can also set $('.navbar').css("margin-top", stopMargin); 
    } 
});

http://jsfiddle.net/xhLhY/

источник

2013-12-20 16:24:34

JS скрипка, как это изменит ваш класс CSS при прокрутке, так что вы можете иметь один класс с изображением набора сказать 100% и один комплект на 50%, так как вы прокручивать JS изменятся CSS классы по размеру, который вы хотите.

$(function(){ 

var images = $(‘.yourClass’) 
scrolledDistance = $(document).scrollTop() 
windowHeight = $(window).height() 
inView = scrolldDistance + windowHeight 

$(images).each(function(){ 
var position = $(‘this’).position() 
topOffset = position.top 
    if (inView < = topOffset){ 
    $(this).css({‘opacity’:’0′}) 
    } 
    }) 



$(window).scroll(function() { 
//update scrolled distance 
scrolledDistance = $(document).scrollTop() 
$(images).each(function(){ 
var position = $(‘this’).position() 
topOffset = position.top 
if (inView < = topOffset){ 
$(this).animate({‘opacity’:’0′},500) 
} 
}) 
}) 

})

источник

2013-12-20 15:24:03 GrayJ

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

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

size = Math.PI/2/1000 
height(x) = maxHeight/2(1 + Math.cos(x/size))

Итак, когда свиток 0 это будет просто MaxHeight и когда х будет 1000, это будет только MaxHeight/2 , и это будет maxHeight снова в 2000 году и так далее.

function imgSize(maxHeight, cycle) { 
    var s = Math.PI/2/cycle 
    return function(x) { return maxHeight/2(1 + Math.cos(x/s) } 
} 

var img = $('img.headlogo') 
    , maxHeight = img.css('height') 
    , resize = imgSize(maxHeight, 1000) 

$(window).on('scroll', function(e) { 
    var x = $(document).scrollTop() 
    img.stop().animate({ height: resize(x) }, 500) 
})

источник

2013-12-20 15:34:59 vittore

Если вам нужны числовые свойства, которые вы должны использовать:

imageHeight = $('.headlogo').height();

иначе ваш imageHeight является NaN и вы не можете использовать:

newHeight = imageHeight - windowScroll

источник

2013-12-20 15:36:03 Luca

Изменение высоты изображения jQuery на прокрутке

ответ

Смежные вопросы