Position of an element with Javascript after refresh

Question

I'm looking for a way to position the #header element of my page as "fixed" only after having scrolled for about 100% to the right.

Here is the JSFiddle demo: http://jsfiddle.net/3zrw2xko/1/

Here is the JavaScript:

var header = $("#header");
$(document).scroll(function() {
if($(this).scrollLeft() >= window.innerWidth) {
    header.css(
        {
            "display":"",
            "position" : "fixed", 
            "top" : "0", 
            "left" : "0", 
            "width" : "50px", 
            "height" : "50px",
            "background" : "red", 
            "z-index" : "9999"
        }
    );
   } else {
    header.css({"display" : "none"});
}
});

But there's one last issue: when I refresh the page of my real project containing this script, the red square disappears and I have to scroll again.

I think that this is about the use of

window.innerWidth

Because it takes the position calculated from the current position. The ideal solution would be to take the position calculated from the left of the document, and not from the left of the current window.

score 2 · Answer 1 · answered Jan 20 '15 at 20:11

2

When you refresh the page, you'll lose the current state unless you save it first. Try saving the current position in localstorage (or a cookie) and grab that when your refresh the page.

answered Jan 20 '15 at 20:11

Schonne Franklin

43
4

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

Set the current position in a variable and fetch it again after page refresh. See this answer for an easy way to achieve this: How to get JS variable to retain value after page refresh?

edited May 23 '17 at 12:28

Community

1
1

answered Jan 20 '15 at 20:13

danjah

1,226
1
12
27

score 1 · Accepted Answer · answered Jan 20 '15 at 20:16

1

If I understood your problem correctly, the red square does not appear if you refresh the page when you had already scrolled to the right?

This is because the position you have scrolled will be lost when you refresh the page, so you'll have to store that position and scroll from that amount of pixels in the document onLoad event.

Regarding window.innerwidth, it refers to the width of the entire document, while $(document).scrollLeft() refers to the amount of pixels scrolled on the left.

answered Jan 20 '15 at 20:16

Angivare

467
5
16

Thank you. Is there a way to make the user go back to the beginning of the page after refreshing it ? A kind of reset ? – Guillaume Jan 20 '15 at 20:33
1

Refreshing the page will reload the document, so calling `window.scrollTo(0,0)` on load would do that. – Angivare Jan 20 '15 at 20:42

score 1 · Answer 4 · answered Jan 20 '15 at 20:22

If you are looking for how to get the width of the document in jQuery

$(document).width

as is seen in the jQuery docs http://api.jquery.com/width/

HOWEVER it sounds like your issue is that the page isn't saving where you have scrolled to on refresh. I suspect this is just because you are using JSFiddle and if you remade this on an actual page it would save the scroll position.

If you want to recreate it in a space like JSFiddle you will have to save your scroll position so that it can be accessed later. You can do this by leveraging your browsers local storage. This might be a good place to start. http://diveintohtml5.info/storage.html

BUT you would still need to check for the scroll position on load so I suggest wrapping your javascript in a function that you can call.

var header = $("#header");
function scrollCheck(){
    if($(this).scrollLeft() >= window.innerWidth) {
        header.css({
            "display":"",
            "position" : "fixed", 
            "top" : "0", 
            "left" : "0", 
            "width" : "50px", 
            "height" : "50px",
            "background" : "red", 
            "z-index" : "9999"
        });
       } else {
        header.css({"display" : "none"});
    }
}

$(document).scroll(function() {
  scrollCheck();
});
scrollCheck();

Position of an element with Javascript after refresh

4 Answers4