jQuery图像高度滚动变化 [英] jQuery image height change on scroll

问题描述

我在我的网站上有一个固定的标题，我试图在向下滚动到特定点时调整徽标图像的大小，然后在向上滚动时增大徽标图像的大小.向下滚动时，当图像达到其原始高度的一半时，图像将不再变小.这是我尝试过的，但无法正常工作.谢谢.

I have a fixed header on my website, and im trying to make the logo image resize as you scroll down to a certain point, then increase as you scroll back up. On scrolling down the image will stop getting smaller when it reaches half its original height. This is what i have tried but its not working. Thanks.

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

推荐答案

您需要像这样的滚动事件之外获取imageHeight和marginHeight

you need to get the imageHeight and marginHeight outside the scroll event like this

//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/

这篇关于jQuery图像高度滚动变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！