Scrollto while scrolling

Question

I isolated the most I can my code into this : http://jsfiddle.net/uXVWu/

HTML :

<a id="stopHere" >Hi !</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

JS :

var theAnchor=document.getElementById("stopHere");
var tempX,tempY;

function stopScroll(e)
{
    var c=parseInt(document.getElementById('stopHere').offsetWidth);
    var d=parseInt(document.getElementById('stopHere').offsetHeight);
    if(tempX<=c&&tempY<=300+d&&0<=tempX&&300<=tempY)window.scrollTo(0,200);
}

function update(e)
{
    var doc=document.documentElement;
    var body=document.body;
    tempX=(e.pageX)?e.pageX:e.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
    tempY=(e.pageY)?e.pageY:e.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);
}

window.onscroll=stopScroll;
window.onmousemove=update;

CSS :

#stopHere
{
    float:left;
    width:100%;
    border:1px solid black;
    text-align:center;
}

What does the program is that if the cursor is on the <a>, then you scroll, the <a> will be on the top. What I want is that you scroll over it and it goes on the top. How can it works?

Possible duplicate: http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it — Richard, May 18 '12 at 15:26
Can you please repeat the desired result, perhaps with a few more words - I have trouble understanding what you want to achive, so I can't help at the moment... — Chris, May 19 '12 at 11:59
It means that you keep scrolling and at the same time the cursor pass over the anchor. — user1365010, May 19 '12 at 14:43
Do you want to pin the box at the top of the window while the rest of the page still stays scrollable? — Dmitry Nikolaev, May 23 '12 at 11:30
Do you mean something in the means of this? http://demos.flesler.com/jquery/scrollTo/ Just animated? — moutonc, May 25 '12 at 14:39

score 2 · Answer 1 · answered May 23 '12 at 14:41

2

Do you mean something like this: http://jsfiddle.net/GTSaz/1/

So that if, when you are scrolling, your mouse is over the element the scrolling will jump down to have the element at the top of the viewport (0,300 in this case).

Also, if you don't want to hardcode the position (0,300) then you can detect in in the script, see http://www.quirksmode.org/js/findpos.html

answered May 23 '12 at 14:41

Adam Heath

4,703
2
35
50

You understood what I want! But even in your exemple, when you 'scroll over' the `a` a little bit fast, it doesn't catch it. – user1365010 May 23 '12 at 17:45
Then detect the position (http://www.quirksmode.org/js/findpos.html) and the size (`offsetWidth` and `offsetHeight`) of the element, and check if the mouse is either in that area, or nearby (pick your desired threshold), and then make it scroll – Adam Heath May 24 '12 at 08:34
But it's what I did in the exemple in my question !!! I just replaced the calculations of top left by 0 and 300 (cause it's absolute positionning here) **BUT** try the exemple and see ! you must put the mouse over the `a` then start scrolling!!! – user1365010 May 24 '12 at 19:23
I identified the problem since I asked the main question : while you scroll, the tempX and tempY aren't updated !!!!! – user1365010 May 24 '12 at 19:28

score 2 · Answer 2 · answered May 23 '12 at 18:51

2

If I'm understanding correctly, you could set it up at top of the page simpler using something like:

document.getElementById('stopHere').style.position="fixed"
document.getElementById('stopHere').style.top="0"

answered May 23 '12 at 18:51

NoBugs

9,310
13
80
146

score 0 · Answer 3 · answered May 25 '12 at 15:22

I am not really sure what do you want . Do you want a fixed div or window.scroll(0,0)

But, I have combined your's and Adam's code, to workaround the situation.

http://jsfiddle.net/c3CJF/1/

Markup:

<a id="stopHere" >Hi !</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS:

#stopHere
{
    position:absolute;
    top:300px;
    left:0px;
    width:100%;
    border:1px solid black;
    text-align:center;
}

Javascript:

var theAnchor=document.getElementById("stopHere");
var tempX,tempY;
var docBody = document.body,
    docEl = document.documentElement,
    scrollElement = /WebKit/.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? docBody : docEl;
var lastScrollTop = scrollElement.scrollTop;
function stopScroll(e)
{
    // Extra check to make if your scroll passes the element on its movement
    if((scrollElement.scrollTop - lastScrollTop + tempY) >= 300){
       window.scrollTo(0,300);
    }
    lastScrollTop = scrollElement.scrollTop;
    var c=parseInt(document.getElementById('stopHere').offsetWidth);
    var d=parseInt(document.getElementById('stopHere').offsetHeight);
    /* the if is to test if the mouse is over the anchor */
    if(tempX<=c&&tempY<=300+d&&0<=tempX&&300<=tempY)window.scrollTo(0,300);
}

function update(e)//to have the x and y of the mouse
{
    var doc=document.documentElement;
    var body=document.body;
    tempX=(e.pageX)?e.pageX:e.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
    tempY=(e.pageY)?e.pageY:e.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);

}

window.onscroll=stopScroll;
window.onmousemove=update;

Scrollto while scrolling

3 Answers3