JQuery перамяшчэння элемента з старонкі мігценнем

На сайце я ствараю ёсць акно, з некалькімі скрынкамі ўнутры, якія пракручваюцца. Існуе таксама вобраз, які неабходны для пракруткі ўніз з карыстальнікам, пакуль яны прагорткі.

У мяне гэта працуе, выкарыстоўваючы падзея пракруткі, кожны раз, калі дзіў пракручваецца змяніць верхняе становішча (элемент, якая вынікае старонку ўніз) scrollTop змяшчаюць спраў.

Праблема заключаецца ў тым, часам элемент, здаецца, успыхваюць затым назад ўніз да правільнага positon.

Я думаю, што гэта нешта з TODO падзея пракруткі не страляць кожны піксель, які пракручваецца, але я не ўпэўнены.

I have a very simple example on jsfiddle so you can see the problem in action: http://jsfiddle.net/DYqqA/34/

JS:

jQuery('#pageWrap').scroll(function(){
    jQuery('#follow').css({
        top: jQuery(this).scrollTop() + 20
    });
});
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});

<�Моцны> HTML:

<div id="scroll">
    Move
    <div id="pageWrap">
        <div id="follow"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
    </div>
</div>
2
Праблема з пазіцыяй фіксуецца, калі карыстальнік завіс над элементам, які замацаваны, яны не могуць зрушвацца па меры positon фіксаванай з'яўляецца адносна вокны не адносна pareent.
дададзена аўтар CharliePrynn, крыніца
@TheoKouzelis Гэта адбываецца ў Firefox, але не так часта, як іншыя браўзэры, такія як Chrome і IE.
дададзена аўтар CharliePrynn, крыніца
@TheoKouzelis Гэта адбываецца ў Firefox, але не так часта, як іншыя браўзэры, такія як Chrome і IE.
дададзена аўтар CharliePrynn, крыніца
Іншае рашэнне было б зрабіць ваш вобраз фіксавана, то вам не трэба пералічваць гэтае становішча на скрутку, а на браўзэр змены памеру.
дададзена аўтар reinder, крыніца
Штраф у светлячок
дададзена аўтар Theo Kouzelis, крыніца

6 адказы

Вы можаце выкарыстоўваць пазіцыя: фіксаваная з паказальнік падзей усталяваны ў становішча None :

http://jsfiddle.net/DYqqA/42/

jQuery('#follow').css('top',$('#scroll').offset().top+20+'px');
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});
2
дададзена
Як КУФ сказаў, астудзіць рашэнне, але гэта павінна працаваць на старых версіях IE, а таксама. дзякуй хоць
дададзена аўтар CharliePrynn, крыніца
Я выкарыстаў гэтае рашэнне. Яго вялікі ў новых браўзэрах, але не працуе ў старых. Вялікі дзякуй!
дададзена аўтар CharliePrynn, крыніца
прахалоднае рашэнне, але праблемы сумяшчальнасці , яшчэ +1
дададзена аўтар Kuf, крыніца

Вы можаце выкарыстоўваць пазіцыя: фіксаваная з паказальнік падзей усталяваны ў становішча None :

http://jsfiddle.net/DYqqA/42/

jQuery('#follow').css('top',$('#scroll').offset().top+20+'px');
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});
2
дададзена
Як КУФ сказаў, астудзіць рашэнне, але гэта павінна працаваць на старых версіях IE, а таксама. дзякуй хоць
дададзена аўтар CharliePrynn, крыніца
Я выкарыстаў гэтае рашэнне. Яго вялікі ў новых браўзэрах, але не працуе ў старых. Вялікі дзякуй!
дададзена аўтар CharliePrynn, крыніца
прахалоднае рашэнне, але праблемы сумяшчальнасці , яшчэ +1
дададзена аўтар Kuf, крыніца

Я б зрабіў гэта крыху па-іншаму, я б выкарыстоўваць фіксаванае месца для малюнка, а таксама з дапамогай Z-індэкс , каб скролінг пры навядзенні курсора мышы на малюнак.

Demo

#scroll{
    ...
    z-index:1;
}
#scroll #pageWrap{
    ...
    z-index:0;
}
#scroll #follow{
    ...
    position: fixed;
    z-index:-1;
    ...
}
0
дададзена
Як я ўжо казаў у каментарах на маё пытанне, карыстальнік не можа пракручваць DIV, калі яны луналі над лагатыпам.
дададзена аўтар CharliePrynn, крыніца
@CharliePrynn Гэта можа быць выпраўлена з дапамогай правільнага Z-індэкс , праверыць абноўлены адказ
дададзена аўтар Kuf, крыніца

Я б зрабіў гэта крыху па-іншаму, я б выкарыстоўваць фіксаванае месца для малюнка, а таксама з дапамогай Z-індэкс , каб скролінг пры навядзенні курсора мышы на малюнак.

Demo

#scroll{
    ...
    z-index:1;
}
#scroll #pageWrap{
    ...
    z-index:0;
}
#scroll #follow{
    ...
    position: fixed;
    z-index:-1;
    ...
}
0
дададзена
Як я ўжо казаў у каментарах на маё пытанне, карыстальнік не можа пракручваць DIV, калі яны луналі над лагатыпам.
дададзена аўтар CharliePrynn, крыніца
@CharliePrynn Гэта можа быць выпраўлена з дапамогай правільнага Z-індэкс , праверыць абноўлены адказ
дададзена аўтар Kuf, крыніца

Проста думкі ...

Perhaps have a look at this function (the one with all the upvotes) How to delay the .keyup() handler until the user stops typing?

Я выкарыстаў гэта ў кантэксце апісанага, як спосаб затрымаць Ajax выкліку да таго часу, пакуль карыстач не спыніць ўводзіць на працягу секунды або два. Гэта прадухіляе залішняя трафік сервера і значна зніжае накладныя выдаткі ў браўзэры.

Калі вы выкарыстоўваеце гэта ў спалучэнні з вашай функцыяй вы павінны знайсці, што выява можа знікнуць з экрана на імгненне у той час як у прагортцы, але гэта будзе потым даганяць, калі карыстальнік спыняе прагортку - вы можаце зрабіць гэта з прыемнай плыўнасцю эфектам таксама. Справа ў тым, што вы будзеце сутыкнуліся з людзьмі, выкарыстоўваючы розныя браўзэры і, хоць ён можа добра выглядаць на вашым выдатным хуткім працэсар і да даты браўзэра, ён усё яшчэ можа быць пластовае на некаторых наведвальніках.

Як я магу сказаць ... толькі думка.

0
дададзена

Проста думкі ...

Perhaps have a look at this function (the one with all the upvotes) How to delay the .keyup() handler until the user stops typing?

Я выкарыстаў гэта ў кантэксце апісанага, як спосаб затрымаць Ajax выкліку да таго часу, пакуль карыстач не спыніць ўводзіць на працягу секунды або два. Гэта прадухіляе залішняя трафік сервера і значна зніжае накладныя выдаткі ў браўзэры.

Калі вы выкарыстоўваеце гэта ў спалучэнні з вашай функцыяй вы павінны знайсці, што выява можа знікнуць з экрана на імгненне у той час як у прагортцы, але гэта будзе потым даганяць, калі карыстальнік спыняе прагортку - вы можаце зрабіць гэта з прыемнай плыўнасцю эфектам таксама. Справа ў тым, што вы будзеце сутыкнуліся з людзьмі, выкарыстоўваючы розныя браўзэры і, хоць ён можа добра выглядаць на вашым выдатным хуткім працэсар і да даты браўзэра, ён усё яшчэ можа быць пластовае на некаторых наведвальніках.

Як я магу сказаць ... толькі думка.

0
дададзена