Header that partially scrolls, partially freezes?

Ask the community
,
1

I am looking to replicate the header on desktop (not mobile) at walmart.com

This is easily doable with Editor X, but we are using Wix Editor for this particular site.

Essentially, I need the top part of the header to scroll up with the page, but the lower part of the header to then freeze. This way, the header can have a large logo and info on the landing page but then isn’t taking up as much space when the user is scrolling.

I am not looking for the changing header - we know how to change the header on scroll, but in this case we want the top part of the header to scroll up and the bottom half to then freeze like in the example.

Thank you!

2

If it’s not EditorX then:

  1. if you need it on both desktop and mobile view, you’ll have to create the element using custom element (html, css).

  2. If it’s for desk top only, I think you can create 2 strips with the header contents. 1 of them will be scrolled with the page and the other one pinned to screen. Add anchors to the page and expand-collapse each of the the boxes based on the scroll position.

3

Thank you, J.D! This is one we only need on desktop, and #2 would be a perfect solution. My trouble is figuring out how to let an element scroll (the lower header) then pin to the top once it hits the top of the viewport, effectively covering up the upper header. Again - it is such a simple solution on Editor X but figuring that out with Editor is tricky. If you know of any similar solutions someone has figured out, please let me know!

I am totally willing to code - we code almost all of our headers to fade or change on scroll, but this one has been tricky to get it to behave like the walmart.com example.

4

Did someone wrote a code for this? I would like to let two boxes in my header move with the page (scrolls), only the logo on the left freezes and stays visible.

5

export function anchorStrip_viewportEnter ( event ) {
$w ( “#menuBigStrip” ). show ();
$w ( “#menuSmallStrip” ). hide ();
}

export function anchorStrip_viewportLeave ( event ) {
$w ( “#menuBigStrip” ). hide ();
$w ( “#menuSmallStrip” ). show ();
}

Three strips are used in this one, menuBigStrip is the bigger strip that shows menu plus the extra top part and the menuSmall strip is just menu that freezes and can be seen as you scroll down. Third strip is anchorStrip with 0 opacity color, although it is on top of header, it isn’t attached to it. It should be placed right below the top part that will scroll up as with the site so that when the viewport enters the anchorStrip, the menuBigStrip will hide and just menuSmall strip is displayed. Also, make sure the anchorStrip is enabled to show on all pages.