Question

我的网站上有一个固定的标题，我试图在向下滚动到某个点时调整徽标图像的大小，然后在向上滚动时增加。向下滚动时，当图像达到其原始高度的一半时，图像将停止变小。这是我尝试过但它不起作用。感谢。

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);
    }
});

Answer 1

只是为了从这个问题中获得乐趣，请考虑这个

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

因此，当滚动为0时，它将只是maxHeight，当x为1000时，它将只是maxHeight / 2，并且在2000年再次为maxHeight，依此类推。

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)
})

Answer 2

如果您需要数字属性，则必须使用：

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

否则您的imageHeight NaN ，您无法使用：

newHeight = imageHeight - windowScroll

Answer 3

你需要在滚动事件之外得到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/

Answer 4

像这样的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)
}
})
})

})

滚动时jQuery图像高度更改

4 个答案: