jQuery moving element with page flashing

Question

The site I am creating has a box, with multiple boxes inside that are scrollable. There is also an image, that needs to scroll down with the user while they scroll.

I have this working using the scroll event, Each time the div is scrolled I change the top position (of the element that is following the page down) to scrollTop of the containing div.

The problem is, occasionally the element seems to flash up then back down to the correct positon.

I think it has something todo with the scroll event not firing every pixel that is scrolled, but I am unsure.

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">
    <a href="#" class="move">Move</a>
    <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>

A different solution would be to make your image fixed, then you don't need to recalculate it's position on scroll but on browser resize. — reinder, May 28 '13 at 12:14
The problem with position fixed is when the user is hovered over the element that is fixed, they can't scroll as positon fixed is relative to the window not relative pareent. — CharliePrynn, May 28 '13 at 12:16
@TheoKouzelis This happens in firefox, but not as often as other browsers, such as Chrome and IE. — CharliePrynn, May 28 '13 at 12:16

score 2 · Accepted Answer · answered May 28 '13 at 12:21

2

You could use position:fixed with pointer-events set to 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); 
});

answered May 28 '13 at 12:21

A. Wolff

74,033
9
94
155

1

cool solution but has [compatibility issues](http://caniuse.com/pointer-events), still +1 – Kuf May 28 '13 at 12:29
As Kuf said, cool solution but this has to work on older versions of IE as well. Thanks though – CharliePrynn May 28 '13 at 12:33
I have used this solution. Its great in new browsers but doesn't work in older ones. Thanks a lot! – CharliePrynn May 29 '13 at 12:54

Kuf · Answer 2 · 2013-05-28T12:53:22.770

0

I would have done it a bit differently, i would use fixed location for the image, as well as using z-index to allow scrolling when hovering over the image.

Demo

#scroll{
    ...
    z-index:1;
}
#scroll #pageWrap{
    ...
    z-index:0;
}
#scroll #follow{
    ...
    position: fixed;
    z-index:-1;
    ...
}

edited May 28 '13 at 12:53

answered May 28 '13 at 12:16

Kuf

17,318
6
67
91

As I said in the comments on the my question, the user is unable to scroll the div if they are hovered over the logo. – CharliePrynn May 28 '13 at 12:17
@CharliePrynn This can be fixed using the correct `z-index`, check out the updated answer – Kuf May 28 '13 at 12:53

score 0 · Answer 3 · edited May 23 '17 at 11:50

Just a thought...

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

I have used this in the context described, as a way to delay an ajax call until a user stops typing for a second or two. This prevents excessive server traffic and significantly decreases overhead in the browser.

If you use this in conjunction with your function you should find that the image may disappear off the screen for a moment whilst the user scrolls but it will then catch up when the user stops scrolling - you could do this with a satisfying easing effect too. The thing is, you'll be having to contend with people using a range of browsers and, although it may look good on your lovely fast processor and up to date browser, it may still be flaky on some visitors.

Like I say... just a thought.

jQuery moving element with page flashing

3 Answers3

Demo