page doesn't update, till I scroll

Question

I am using a scroll function, and recently added a refresh with it

(cause I had a mail form and this was the easiest way to get the ?resp=0/ thing away. Yes I know there were other ways but this one was the best one to use for me, so please don't suggest other ways to do that process)

somehow sometimes when I refresh the page, it doesn't notice on what position it is. I have things starting on display:none but when it is on a certain place on the page it is display:block. When I scroll the page suddenly updates (like images appearing cause they get display:block, and the url changing from index.php#this to index.php#that). I would like it if it changed instantly on refresh so it doesn't need the scrolling first.

Most of the times it works fine but just sometimes it will act like that, I don't know were the problem is.

code below:

$(function () {
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > ($(document).height() / 4.65) * 3) {
            $('.Attribute').removeClass('that').addClass('this'); (etc..)
            if (performance.navigation.type == 1) {
                window.location.replace("index.php#this");
            }
        }

        else if ($(window).scrollTop() > ($(document).height() / 4.65) * 1.3) {
            $('.Attribute').removeClass('that').addClass('this'); (etc..)
            if (performance.navigation.type == 1) {
                window.location.replace("index.php#that");
            }
        }

        else if ($(window).scrollTop() > $(document).height() / 4.65 * 0.3) {
            $('.Attribute').removeClass('that').addClass('this'); (etc..)
            if (performance.navigation.type == 1) {
                window.location.replace("index.php#things");
            }
        }
        else if ($(window).scrollTop() < $(document).height() / 4.65 * 0.3){
            $('.Attribute').removeClass('that').addClass('this'); (etc..)
            if (performance.navigation.type == 1) {
                window.location.replace("index.php#something");
            }
        }
    });
});

score 1 · Accepted Answer · answered Apr 20 '17 at 12:19

You can consider doing :

$(window).bind('scroll', function () {
    else if ($(window).scrollTop() > ($(document).height() / 4.65) * 3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#this");
        }
    }

    else if ($(window).scrollTop() > ($(document).height() / 4.65) * 1.3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#that");
        }
    }

    else if ($(window).scrollTop() > $(document).height() / 4.65 * 0.3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#things");
        }
    }
    else if ($(window).scrollTop() < $(document).height() / 4.65 * 0.3){
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#something");
        }
    }
}).scroll()

Adding the .scroll() will call the event

Or you can put the event in a function and call it :

function onScroll () {
    else if ($(window).scrollTop() > ($(document).height() / 4.65) * 3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#this");
        }
    }

    else if ($(window).scrollTop() > ($(document).height() / 4.65) * 1.3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#that");
        }
    }

    else if ($(window).scrollTop() > $(document).height() / 4.65 * 0.3) {
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#things");
        }
    }
    else if ($(window).scrollTop() < $(document).height() / 4.65 * 0.3){
        $('.Attribute').removeClass('that').addClass('this'); (etc..)
        if (performance.navigation.type == 1) {
            window.location.replace("index.php#something");
        }
    }
}

$(window).bind('scroll', onScroll);
onScroll();

PS : is that normal that the first if is an else if ?

I just edited the first if statement, it has like 9 if's in my normal code so i chanced that part :) and i will try your code — Minegolfer, Apr 20 '17 at 12:22
Thanks it worked, I did the first one. (is one of them better then the other one? like one of them giving less problems?) also can't accept the answer yet, need to wait 5 minuts cause you was to fast :) — Minegolfer, Apr 20 '17 at 12:26
Well I don't know I often use the first one because it is less code (and looks clear to me), but the second one is nice too and the one from @Sandwell can also work — Alex, Apr 20 '17 at 12:27
I got a code ` $("#myBtn").click(); '; } ?>`, first the url is still something with `!resp=..` so it will click the button fast. After like half a second it chanced to the good url. You know some way to avoid this? > Like the url changing before it refreshes — Minegolfer, Apr 20 '17 at 12:31
I don't really understand what you want to do but if you just wanna change the url, you might find this [http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page] useful — Alex, Apr 20 '17 at 12:36
I will just make another question for it but thanks for the fast replies :) — Minegolfer, Apr 20 '17 at 12:40

score 1 · Answer 2 · answered Apr 20 '17 at 12:22

1

You could try this

$(window).on("load scroll",function(e) {

answered Apr 20 '17 at 12:22

Sandwell

1,451
2
16
31

page doesn't update, till I scroll

2 Answers2