在x像素滚动后启动jQuery函数

我有一个jQuery函数，我只想在用户向下滚动一定数量的像素后启动它。以下是我的职能：

问题是我需要它启动后500px滚动，并首次出现在零宽度和高度。最大宽度为151px，最大高度为500px。这个想法是有一种放大效果

但是没有成功

---

有人有什么亮点吗？太棒了，谢谢你。：）

定义一个函数并在滚动时应用。请注意，正在传递

$（this）

reference以获取对象的引用（

window，在这种情况下为
）：

你的第一个代码已经在为我工作了

<script>
$(function() {
    var width = $('img').width();
    var height = $('img').height();

    $('img').width(0).height(0);

    var ratio = width/height;

    console.log(width,height);


$(window).on("scroll", function() {

    console.log(ratio);
    var w = $(document).scrollTop();    
        $("img").width(w*ratio).height(w)
});

});
</script>


$（函数（）{
变量宽度=$（'img'）.width（）；
var height=$（'img'）.height（）；
$（'img'）。宽度（0）。高度（0）；
var比率=宽度/高度；
控制台。原木（宽度、高度）；
$（窗口）.on（“滚动”，函数（）{
对数（比率）；
var w=$（document.scrollTop（）；
$（“img”）.宽度（宽*比）.高度（宽）
});
});

我在JSFIDLE上试用过它：
考虑到需求，下面是我能想到的使用当前代码的最简单的方法-开始缩放500像素以上的图像，滚动到最大500像素的图像高度：


似乎可以做到这一点，但我可能会尝试编写一个优化版本，使用
transform
和
requestAnimationFrame
。这可能是一个很好的改进，特别是如果页面上有更多的动画发生的话。单独来看，这不应该对性能有太大影响


更新-以下是我将采取的全部方法。。。它只需要在顶部定义两个变量-
startpoint
对于滚动位置，缩放应从开始；对于图像应成为的最大尺寸，缩放应从最大高度开始。其余部分将自动计算，并进行一些优化调整：


$（窗口）.on（'load'，function（））{
var起始点=500，
最大高度=500，
img=$（'img'），
顶点=img.高度（），
比例=最大高度/顶点，
modern=window.requestAnimationFrame；
css（'transform-origin'，'0'）；
scaleIt（0）；
$（this）.scroll（函数（）{
var current=$（this）.scrollTop（），
活动=img.hasClass（“缩放”）；
如果（current>startpoint&¤t Hi，是的，我正在工作，但我希望此函数仅在400px向下滚动后启动…：（您是否有任何想法，请：）？我只想在以“var w=…”开头的行后添加一个“if（w<400）return；”。这将始终检查滚动位置是否仍低于400px，并在此处结束该功能，以便不执行宽度和高度命令。但正如我所见，您的问题已经解决。您好，谢谢，我尝试了此操作，但似乎不起作用：/：/您有任何其他建议吗？我让您转到包装方向如果你有一把小提琴复制这个问题，我可以帮你更好我，谢谢你…我试着把它包装到你提供的函数中…但是没有运气：/这是我的小提琴，如果它有帮助的话…：真的很感谢你的时间马科斯！你太棒了，它应该首先显示为零宽度和高度，最大宽度：151px，最大高度：500px。这个想法是为了有一种放大效果：）非常感谢你的帮助！！真的很喜欢！没问题，我会去看看的。：-）
$(window).on('scroll', function() {

    scrollPosition = $(this).scrollTop();

    if (scrollPosition >= 500) {

        // If the function is only supposed to fire once
        $(this).off('scroll');

    $(function() {
        var width = $('img').width();
        var height = $('img').height();

        $('img').width(0).height(0);

        var ratio = width/height;

        console.log(width,height);


    $(window).on("scroll", function() {

        console.log(ratio);
        var w = $(document).scrollTop();    
            $("img").width(w*ratio).height(w)
    });        
    });
    }
});

$(window).on('scroll', function() {
     yourFunction($(this));
});

function yourFunction($this) {
    scrollPosition = $this.scrollTop();
    if (scrollPosition >= 500) {
        // If the function is only supposed to fire once
        $this.off('scroll');
        var width = $('img').width();
        var height = $('img').height();
        $('img').width(0).height(0);
        var ratio = width/height;
        console.log(width,height);

  }

}

<script>
$(function() {
    var width = $('img').width();
    var height = $('img').height();

    $('img').width(0).height(0);

    var ratio = width/height;

    console.log(width,height);


$(window).on("scroll", function() {

    console.log(ratio);
    var w = $(document).scrollTop();    
        $("img").width(w*ratio).height(w)
});

});
</script>

$(function() {

var img = $('img'),
width = img.width(),
height = img.height(),
ratio = width/height;

img.width(0).height(0);

$(window).scroll(function() {

    var current = $(this).scrollTop();

    if (current > 500) {

    var term = Math.min(current-500, 500),
    range = term*ratio;

    img.width(range).height(term);
    }
    else img.width(0).height(0);
});
});

$(window).on('load', function() {

var startpoint = 500,
maxheight = 500,
img = $('img'),
apex = img.height(),
scale = maxheight/apex,
modern = window.requestAnimationFrame;

img.css('transform-origin', '0 0');
scaleIt(0);

$(this).scroll(function() {

    var current = $(this).scrollTop(),
    active = img.hasClass('zoomed');

    if (current > startpoint && current <= startpoint+maxheight) {
    if (!active) img.addClass('zoomed');

    var ratio = (current-startpoint)/maxheight*scale;

    if (modern) requestAnimationFrame(function() {scaleIt(ratio)});
    else scaleIt(ratio);
    }
    else if (current <= startpoint && active) {
    scaleIt(0);
    img.removeClass('zoomed');
    }
    else if (active) {
    scaleIt(scale);
    img.removeClass('zoomed');  
    }
});

function scaleIt(proportion) {

    var factor = 'scale(' + proportion + ')';
    img.css({'-webkit-transform': factor, transform: factor});
}
});