0

我有一些使用 jQuery 1.4.4 的“视差效应”脚本。我需要升级到 1.8.3 版本。

我有一些.bind()不适用于 1.8.3。

见脚本：

$(document).ready(function() { //when the document is ready...


    //save selectors as variables to increase performance
    var $window = $(window);
    var $firstBG = $('#home');
    var $secondBG = $('#produtos');
    var $thirdBG = $('#empresa');
    var $fourthBG = $('#contato');
    var trainers = $("#second .bg");

    var windowHeight = $window.height(); //get the height of the window


    //apply the class "inview" to a section that is in the viewport
        $('#home, #produtos, #empresa, #contato').bind('inview', function (event, visible) {
            if (visible == true) {
            $(this).addClass("inview");
            } else {
            $(this).removeClass("inview");
            }
        });


    //function that places the navigation in the center of the window
    function RepositionNav(){
        var windowHeight = $window.height(); //get the height of the window
        var navHeight = $('#nav').height() / 2;
        var windowCenter = (windowHeight / 2); 
        var newtop = windowCenter - navHeight;
        $('#nav').css({"top": newtop}); //set the new top position of the navigation list
    }

    //function that is called for every pixel the user scrolls. Determines the position of the background
    /*arguments: 
        x = horizontal position of background
        windowHeight = height of the viewport
        pos = position of the scrollbar
        adjuster = adjust the position of the background
        inertia = how fast the background moves in relation to scrolling
    */
    function newPos(x, windowHeight, pos, adjuster, inertia){
        return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) ;
    }

    //function to be called whenever the window is scrolled or resized
    function Move(){ 
        var pos = $window.scrollTop(); //position of the scrollbar

        //if the first section is in view...
        if($firstBG.hasClass("inview")){
            //call the newPos function and change the background position
            $firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
        }

        //if the second section is in view...
        if($secondBG.hasClass("inview")){
            //call the newPos function and change the background position
            $secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
            //call the newPos function and change the secnond background position
            trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
        }

        //if the third section is in view...
        if($thirdBG.hasClass("inview")){
            //call the newPos function and change the background position
            $thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2850, 0.3)});
        }

        //if the fourth section is in view...
        if($fourthBG.hasClass("inview")){
            //call the newPos function and change the background position for CSS3 multiple backgrounds
            $fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)});
        }

        $('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
    }

    RepositionNav(); //Reposition the Navigation to center it in the window when the script loads

    $window.resize(function(){ //if the user resizes the window...
        Move(); //move the background images in relation to the movement of the scrollbar
        RepositionNav(); //reposition the navigation list so it remains vertically central
    });     

    $window.bind('scroll', function(){ //when the user is scrolling...
        Move(); //move the background images in relation to the movement of the scrollbar
    });

});

我会尝试把.on()，.click()但不工作。

我需要改变什么？

4

0 回答 0