When I hit refresh in the browser I lose my jquery programming

Question

If you take a look at http://www.kahuna-webstudio.fr/ and scroll down the page about 50 pixels or so you will see a div on the left side of the screen slide out. I have managed to duplicate this effect but there is one thing that escapes me; and that is when you hit refresh on my page my jquery programming resets. I don't want this to happen. http://www.kahuna-webstudio.fr/ has it working perfectly. On their page when scroll down 50 pixels and the left nav appears and even when you hit refresh the left nav is still there. The left nav only disappears when the user scrolls back to the top of the page.

What is currently working: The user scrolls down 296 pixels on my page and the left nav slides out and the user brings the scroll bar back to the top of the page (pixels less than 25) and the left nav slides back and disappears. This is all working.

What is not working: But let's say the user scrolls down 296 pixels and the left nav slides out and then the user hits refresh while they are viewing the page. Well in this case the left nav disappears. My jquery programming is reset. I want the left nav, when the user is at 296 pixels or greater, to always be visible even if the user hits refresh.

My code is below. I hope my question makes sense and I welcome any help. Thank you.

$(window).scroll(function () {
    var wintop = $(window).scrollTop();
    var docheight = $(document).height();
    var winheight = $(window).height();

    var newwidthgrow = 80;
    var smallheight = 0;
    var smallwidth = 0;

    //var expanded = "false";
    if ((wintop > 296)) {
        //expanded = "true";
        $("#slidebottom").stop().animate({
            height: docheight + "px"
        }, 'fast', function () {
            $("#slidebottom").stop().animate({
                width: newwidthgrow + "px"
            }, 'slow', function () {
                $("#slidebottomContents").fadeIn();
            });
        });
    }

    if ((wintop < 25)) {
        //expanded = "false";
        $("#slidebottom").stop().animate({
            height: docheight + "px"
        }, 'fast', function () {
            $("#slidebottomContents").fadeOut(function () {
                $("#slidebottom").stop().animate({
                    width: smallwidth + "px"
                });
            });
        });
    }
});

You could try `$(function() { $(window).trigger('scroll'); });` — Jason P, Aug 27 '13 at 17:37
Could you use trigger with my example code? I would really appreciate the help. Thanks. — Ramona Soderlind, Aug 27 '13 at 17:48
If the code you posted is in a DOM ready handler, just put `$(window).trigger('scroll');` directly below/outside your posted code. — Jason P, Aug 27 '13 at 17:54

score 1 · Answer 1 · answered Aug 27 '13 at 17:39

1

Have this window scroll function in a separate place. Call it from window scroll and also from document ready. This will make sure that the user's position is checked both when the page is being scrolled and when the page is loaded/refreshed.

answered Aug 27 '13 at 17:39

user1333371

598
3
13

score 1 · Accepted Answer · edited May 23 '17 at 11:49

If you don't have code in place to remember the scroll position before a refresh, the page will always refresh and scroll position will be 0 again. It sounds like that's not your desired functionality. Triggering a scroll at startup will not fix your problem unless you set the correct window scroll position before triggering it.

The example page you gave looks like it uses multiple scroll libraries, one of which (not sure which one) probably handles setting the scroll position on a refresh.

To do it yourself, you'd have to make use of local storage or the url like explained here: Refresh Page and Keep Scroll Position

score 0 · Answer 3 · answered Aug 27 '13 at 17:39

0

You can use cookie to solve this probelm if you don't want to use server side to fix position when page is reloaded.

answered Aug 27 '13 at 17:39

Hamed Khosravi

535
7
21

When I hit refresh in the browser I lose my jquery programming

3 Answers3