How to reload a codepen.io page with either JS/Jquery during runtime?

Hi all.
I’m sure somebody here has run into this issue.
I tried :

location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)

but I think it’s a codepen.io issue, as someone here says:
Stackoverflow post

Codepen just replaces location.reload() by location.removedByCodePen() .

So how can I easily solve this?

Thanks

window.history.go(0);

1 Like

Thanks. That works for a while, I can scroll up/down a few times, and open a collapsed window , but then it fails suddenly : ‘not found’.

given is a codepen project, please share the url with your progress and I am sure we can find a solution once I understand what we want to achieve

1 Like

I’m trying to reload the page when the user scrolls to the top (as seen in the same page ubereats.com)

My codepen

Thanks :slight_smile:

What makes you think the page is reloading on that webpage when you scroll to the top?

It isn’t, it can with windows.location.reload() or one of the other options it would,
I commented it out as it’s not working correctly in codepen .

I was talking about the webpage you posted a link to (not the Codepen).

1 Like

No stackoverflow mentioned that it’s not possible to use any of these methods on a codepen.io page.
I’m still trying to find an alternative to use on codepen (to reload my codepen page)
Thanks

I still do not understand why you think the ubereats.com site reloads when the user scrolls to the top.

1 Like

Considering it’s a React app I don’t see why they would refresh the page. The header changes based on the scroll position but that has nothing to do with a page refresh.

Reloading the page every time the user scrolls to the top also seems like an odd/annoying UX decision and is likely not what you want.

What exactly are you trying to achieve by reloading the page?


Anyway, if you need the page reload use a different site like Stackblitz or a host like Netlify instead of Codepen.

1 Like

In order to reload the background, without the white header at the top?

Yes, the header needs to reload to the background image?
When a user scrolls down the header becomes white, and then when a user scrolls up all the way to the top it becomes the regular background again.

It’s been more than a year since I dealt with JS/Jquery so considering that I’m doing pretty well.

Thanks

This can all be done by creating CSS classes and adding/removing them depending on scroll location. There is absolutely no need to reload the page.

1 Like

You do not use a page refresh for that. You change the styles applied to the header based on the scroll position.

It starts out transparent and when the page is scrolled down it gets a white background which again is removed when you scroll to the top.

Some random examples

1 Like

Yes, I have no problem adding the white header, just removing it.
I could try addClass and removeClass maybe, I will try this later today.

Thanks!

You should be able to just set the styles as well

$("#uber-header").css({ background: 'transparent'});

Inside your if(scroll < 100) condition.


Although using classes instead of inline styles is not a bad idea.

1 Like