Question

I have a jQuery function that I would like to start only after the user has scroll down a certain amount of pixels. Here are my functions :

Fiddle

的索引

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

我试图把它包装到那个函数中：

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

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

但没有成功......

有人有什么亮点吗？非常好，谢谢。：）

Answer 1

定义一个函数并应用于滚动。请注意，正在传递$(this)引用以获取对象的引用（在这种情况下为window）：

$(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);

  }

}

Answer 2

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

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

我在jsfiddle上尝试过：http://jsfiddle.net/ne4LyLbu/

Answer 3

这是我能想到的使用当前代码的最简约方法，考虑到要求 - 开始缩放500像素以上滚动到最大500像素图像高度：

Demo

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

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

更新 - 这是我要采取的完整方法......它只需要在顶部定义两个变量 - startpoint用于缩放开始时的滚动位置和{ {1}}图片应该变成最大尺寸。其余的将自动计算，并进行一些优化调整：

Pen

maxheight

Start a jQuery function after x pixel scroll

3 个答案: