CODEWITHSUNDEEP
javascriptjqueryhtml
Guillaume
Guillaume

Reputation: 352

Position of an element with Javascript after refresh

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.

Upvotes: 0

Views: 1460

Answers (4)

Quinn Keaveney
Quinn Keaveney

Reputation: 1614

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();

Upvotes: 1

Angivare
Angivare

Reputation: 476

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.

Upvotes: 1

danjah
danjah

Reputation: 1246

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?

Upvotes: 1

Schonne Franklin
Schonne Franklin

Reputation: 43

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.

Upvotes: 2

Related Questions