根据垂直滚动移动元素 - 最高效的方式？

Question

我正在构建一个小脚本来根据垂直页面滚动操作元素。 这个解决方案基本上可以正常工作，但我想知道是否有更高效的方法来做到这一点。我希望一切顺利。

http://jsfiddle.net/d4NCE/1/

$(document).ready(function(){

var element = $("#element1");
var elementOffset = element.offset().top;
var windowHeight = $(window).height();
var distanceEntry = windowHeight*0.8; // distance from element
var distanceExit = windowHeight*0.2; // distance from element
var entry = elementOffset-distanceEntry; // entry point in px from pagetop
var exit = elementOffset-distanceExit; // exit point in px from pagetop
var stepping = (exit-entry)/100; // px to percentage
$("#entry").css("top", entry); // placing entry-marker
$("#exit").css("top", exit); // placing exit-marker

$(window).scroll(function(){

    var scroll = $(window).scrollTop(); 
    var value = (scroll-entry)/stepping; // CALCULATION PROGRESS OF ANIMATION

    if(value>=100) {value=100;} // cutting top and bottom
    if(value<=0) {value=0;} // cutting top and bottom
    value = Math.round(value); // to integer


    $("#element1").css("left", value); // WRITING VALUE TO ELEMENT

    $("#head").html("Element-Movement in Percent: " + value);
    });

});

谢谢！

Answer 1

由于scroll 事件经常触发，如果您将尽可能多的逻辑从滚动事件中移出，您可能会看到性能略有改善。

在您的示例中，所有元素选择都可以移出侦听器，并且 if 语句不需要 >= 和 <=。 < 和 > 将实现相同的目标。 例如

var $win = $(window);
var $element1 = $("#element1");
var $head = $("#head");
$win.scroll(function(){

    var scroll = $win.scrollTop(); 
    var value = (scroll-entry)/stepping; // CALCULATION PROGRESS OF ANIMATION

    if(value>100) {value=100;} // cutting top and bottom
    if(value<0) {value=0;} // cutting top and bottom
    value = Math.round(value); // to integer


    $element1.css("left", value); // WRITING VALUE TO ELEMENT

    $head.html("Element-Movement in Percent: " + value);
});

不确定这会给你带来显着的性能提升，但应该不会受到伤害。

Answer 2

好的，现在我完成了我的小脚本。 如果有提高性能的方法，或者有更好的方法来实现我的目标，我再次希望有一些输入。 已经尝试将所有重要信息存储在变量中，因此尽可能少的 dom-scans。谢谢各位！

看看脚本：http://jsfiddle.net/sVeXT/1/

$(document).ready(function(){

(function parallax() { 

    var win = $(window);
    var windowHeight = win.height();
    var distanceEntry = windowHeight*0.85; // distance from element
    var distanceExit = windowHeight*0.20; // distance from element

    var elements = []; 

    function elementsSetup() { // scans DOM for Elements and forwards their specs to "Element"-Constructor
        elements = [];
        $(".element").each(function(i, el){ // iteration through elements
            var height = $(el).height();
            var offset = $(el).offset().top;
            elements.push(new Element(i, el, height, offset));  // link to constructor and adding to array
            });
        };      
    elementsSetup();

    function Element(i, el, height, offset) { // constructor
        this.el = el;
        this.height = height;
        this.i = i;
        this.offset = offset;
        this.entry = offset-distanceEntry+height/2; // calculations to center element 
        this.exit = offset-windowHeight/2+height/2; // calculations to center element 
        this.stepping = (this.exit-this.entry)/100; // to percentage 
        }

    $(window).scroll( function(){ // when scrolling writing to CSS of elements
        var scroll = win.scrollTop();
        var x = elements.length-1;
        for (var i = x; i>=0; i--) {
            var value = valueCap( (scroll-elements[i].entry)/elements[i].stepping );
            $(elements[i].el).css("left", value);
            }  
        });

    $(window).resize(function() { // in case of window-resize values are redefined
        windowHeight = win.height();
        elementsSetup();
        });

    function valueCap(val) { // caps value 0-100
        if(val>100) {val=100;}
        if(val<0) {val=0;}
        return val;
        }

    })();

});