如何根据页面滚动位置来设置对象的动画 [英] How to animate an object depending on page scroll position

问题描述

我正在使用下面的代码来显示/隐藏基于当前滚动位置的内容：

I am currently using the following code to display/hide content based on the current scroll position:

$(window).scroll(function () {
    if ($(window).scrollTop() >= 409) {
        $('.cliocont').fadeTo('slow', 1.0);
    } else if ($(window).scrollTop() <= 409) {
        $('.cliocont').fadeTo('slow', 0.5);
    }
});

为什么这段代码似乎不起作用？每当else if语句的代码工作，但每当它被添加的内容不会出现或隐藏。

Is there a reason why this code does not seem to work? Whenever the else if statement the code works, but whenever it is added the content doesn't appear or hide.

感谢，
Nathan Niamehr

Thanks, Nathan Niamehr

推荐答案

我会说这是更合适的，这包括两个动画的时间锁定 - 删除console.log（...）调用：

I would say this is more proper, this includes the time locks for two animations -- do remove the console.log(...) calls:

            <script type="text/javascript">

            var animateTrainer1 = true;
            var animateTrainer2 = true;
            $(window).scroll(function () {

                var scrollTop = $(window).scrollTop();

                if (scrollTop > 500 && animateTrainer1) {
                    animateTrainer1 = false;
                    console.log("animated trainer 1");
                    Animations.toPosition("#trainer1", 0, -100, 4000);
                }

                if (scrollTop > 800 && animateTrainer2) {
                    animateTrainer2 = false;
                    console.log("animated trainer 2");
                    Animations.toPosition("#trainer2", 100, 340, 4000);
                }

            });

        </script>

这篇关于如何根据页面滚动位置来设置对象的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！