0

I want to move 4 objects of the DOM when a user scrolls the page.

you can check the page i'm talking about at this address:
http://www.tessuti-arredo.it/new/chi_siamo/rassegna/

as the user scrolls - i'm using $(window).scroll(function() - i check if the window.scrollTop is more than 10 pixels to move some objects. This seems to work fine. but on the ELSE statement (i mean when scrollTop is minor than 10 pixels) - and theese objects should move back to the original position - i have a strange behaviour, especially on two of the 4 objects i move (two fixed objects that i move together calling their class).

maybe it's a bit complicated to explain with my poor english, but if you have a look at the address i posted above it's quite easy to understand, just try to scroll the page.

The objects i want to move are: - a link (a) object contained inside the #header div = $("#header h1 a") - the left sidebar menu called with his id = $("#sidebar") - and two fixed divs, the main horizontal menu and his background, called by their class = $(".moveMenu")

One important last thing: with Firefox it seems to be ok, with all other browsers i have a variable delay that looks like some error on my code.

speaking about my code, here it is:

$(document).ready(function(){

    $(window).scroll(function(){
     if($(this).scrollTop() > 10) {
        $("#sidebar").stop().animate({top:'119px'}, 100, function (){   
                        // some callback
                    });

        $("#header h1 a").stop().animate({marginTop:'30px'}, 100, function (){
                        // some callback
                 });

         $(".moveMenu").stop().animate({top:'0'}, 300, function (){
               // here i change the class of fixed objects to call them back on else statement
                 $(this).removeClass('moveMenu').addClass('moveMenu2');
               });

        }else{  

            // this is happening with unwanted delay
            $(".moveMenu2").stop().animate({top:'90'}, 300, function (){
                    $(this).removeClass('moveMenu2').addClass('moveMenu');
                });

            $("#sidebar").stop().animate({top:'89px'}, 100, function (){
                        $(this).css({'padding-top' : '40px'}); 
                });

            $("#header h1 a").stop().animate({marginTop:'0px'}, 100, function (){
                            // some callback
                });
            }
    });

});

I know there are some empty callbacks, i just kept them to have it ready to fill with something, i tryed to delete them, nothing is changed.

another thing i tryed is to call the two delaying object with a specific id instead of class but nothing has gone better...

i really hope you will find some error in my coding, i know i'm not so good.

4

1 回答 1

0

我只在 IE 中遇到过严重的延迟，在 Firefox 中它是最小的，在 Chrome（我的默认浏览器）中没有延迟，但是如果你快速上下滚动，脚本将无法完全动画化。window.onscroll 在滚动发生时触发了令人难以置信的次数 - 这就是造成滞后的原因。我测试了一些尝试来改进这个问题，基本上它们涉及最小化每次触发事件时发生的操作数量：

  1. 我首先将两个 div 元素“mainmenubg”和“mainmenu”组合成一个带有“moveMenu”类的 div。这通过 $('.moveMenu') 和 $('.moveMenu2') 仅引用和动画一个元素来提高效率。

  2. 我创建了三个全局 javascript 变量，用于在滚动事件期间引用对象。每次调用 $('something') 时都会发生搜索，但在这种情况下，始终会引用相同的对象。这通过从事件本身中删除“查询”来提高效率。

    var asidebar = $("#sidebar");
var aheader = $("#header");
var amenu = $(".moveMenu");

    然后在您的外部 javascript 文件中为每个动画调用提供如下内容： amenu.stop().animate({top:'0'},300,function(){$(this).removeClass('moveMenu').addClass('moveMenu2');});

  3. 我注意到的最后一件事是，无论您的对象是否已经到位，您的动画调用都会发生。例如，用户向下滚动页面，以便菜单和标题动画到他们的新位置。好吧，一旦它们在那里，就没有理由在用户继续向下滚动时继续进行动画调用。相反，下一个动画应该只在用户达到 10px 阈值并且对象需要重新定位时出现。改变这种情况的一种方法是创建一个全局变量，该变量可用于确定是否需要出现动画。例如：var change = 0;然后在您的外部文件中添加一个嵌套的 if 语句来测试情况：

    if($(this).scrollTop() > 10){ if(change == 0){ ...animations... change = 1;}}

    else if( change == 1 ){ ...animations... change = 0;}

一般来说，这都是为了让你的代码更有效率。

回答你的第二个问题：

我不确定你的意思，因为我没有遇到这个问题。对不起！

于 2010-07-15T15:24:49.220 回答