justinmind-logo
 
Upvote 2

How do I lock the header and main nav bar on screen and still allow other elements to scroll vertically with vertical swipes?

Answered Victor Conesa 10 years ago

I would like to have a persistent main nav bar at the bottom of most screens - that is locked in place even if the screen is 'tall' enough to warrant scrolling vertically. Can someone please tell me how to do this? I've tried for a long time, and I just don't know where I would set this up. Is it something special with the element stays?

Best Answer
photo

To create a fixed header:

1) Select the element on the Canvas that you would like to be fixed.

2) Look to the Properties palette and find the Position section. Then, tick the 'Display Pin Position' box.

134c239726a3c4a0e5ec9cc8e208d6e2

3) Look to the 'Y' parameter and from the dropdown, choose 'pin to top'.

3c5b702792e642219a5f4d0bb8711f94


That's it! You can also pin an element along the X axis by clicking on the 'X' parameter dropdown.

2ea7f77c49f2b9bac6d90611509e2ffe

Replies (16)
photo
1

This was so interesting question that I had to try it out.


I think it can be done either with table or dynamic container.


1. Table method


1.1 Create a table with 2 rows. Resize the cells to what you like to work with.


1.2 Select canvas and create an 'on Window Resize' event and in Interactions window select Resize action, as target component select the whole table and for it give 100 % height relative to parent (which in this case is the whole browser window). Click OK.


1.3 Select the bottom cell of the table. Create the same 'on Window Resize' Event for it, except the target is the cell and value is Fixed (the size of your navbar). Having it set to fixed value instead of percentage keeps your navbar visible at all times.


1.4 Create your content inside the two cells and tweak whatever properties you need to tweak.


2. Dynamic Container (DC) method


2.1 Create DC whose Layout vertical alignment is set to Bottom.


2.2 Create an 'on Window Resize' event and in Interactions window select Resize action, as target component select the DC's main panel and for it give 100 % height relative to parent (which in this case is the whole browser window). Click OK.


2.3 Create another DC inside the previous DC. This is for your navbar element. Due to prior set vertical alignment your inner DC should fall to the bottom of the parent DC.


2.4 Create a third DC above the second DC. This is for your content. Give it a resize event of about 90% of the parent.


And from here on I think you can manage the rest.


Personally I got better results with the table method as I managed to keep the navbar cell consistent in vertical size.

photo
1

Hi Erich,


we have a tutorial of how to do it. Here you can read it: http://www.justinmind.com/prototyper/...


Thanks Markku for your two method explanations.

photo
1

Hi this page now leads to a 404 error - has it been moved or replaced?

photo
1

Hi,


I badly need an answer for the same question. I'm working on an urgent project and I wanna lock the navigation bar and the header section while I scroll through the rest. Can anyone please assist me???

photo
1

Hey Mate, Did you get an answer to your question? Coz I'm having the same.

photo
1

Hi, recent versions have had the Parallax Widgets in the Widgets panel. Use the Pinned Top widget.

photo
1

Just remove the content from the widget layer and add your own. Place it where you want it.

photo
1

Hi, I want to change my header when the content scrolled. The problem is I made a dynamic panel and add scrolling function to the panel. Now, I want to change the header of the dynamic scrollable panel. Is there any way?

photo
1

You can add there a "Set Value" action to change the header text, which fires at some event.

photo
1

Hi Markku, thanks for the reply. Since, I am new to this tool, I don't know how to do it. Do you have any example or tutorial that could help me?

photo
1

Yes, sure.


Select the header or the dynamic panel, then in the Events panels selct New Event,


then from the dialog window select "on Scroll" from the fisrt dark box in the top left corner.


Then from the second dark box select "Set Value", then type the new value in the "Fixed" input box.


Then click OK.


This alone will not give you satisfactory results, because once you scroll then the header will change. You propably want to change back to original header once your scrolling is back to the top.


But try this first and reply when done.

photo
1

hmm, I did it, but the header won't hide! it seems I can'T apply any event to this scrollable panel :(


Let me ask you this, should I put the header into the dynamic panel? since the header is fixed, I want the content move below the header, so I moved it out from the dynamic panel.


Now, I want the header changes, when the dynamic panel scroll and reach specific "y" position. ( I have three groups in the scroll area, and each time that dynamic panel reach the content of specific group, I Want the header changes as well, so first is group 1--->scroll to reach group 2--> now header changed to group 2.... and so on!


I have tried it by giving it value in condition but nothing worked.

photo
1

Yes, you can have the header text inside the dynamic panel, if you want the rest of content to scroll underneath it.. You can also just use the text widget alone; just give it background color and make it as big as your dynamic panel was. Then attach the code that keeps it in static position to the text widget.


Then in the "on Scroll" action, add conditions to it to validate when it should display different text content on the header. The conditions compare the Y-position of the browser's viewport to those of the other objects that "touch" the browser viewport top edge.


This is something that you just have to spend some time with and experiment.


I wonder if the new functions could be used here also?


"New functions


We’ve added new area functions in the expression builder: intersects and contains. When you build conditions, you can now specify two more functions that affect the area of the widget itself: when two widgets touch (“intersect”) and when a widget is inside another (“contains”)."


http://blog.justinmind.com/wireframe-...

photo
1

Thanks Markku, yes, I just updated yesterday and faced this intersect, I will try it out :) Thanks for your time anyway

photo
1

No problem. I hope you got something out of this.


I wish there was video meeting possibility here with screensharing. Typing is not ideal for this. :)

photo
1

To create a fixed header:

1) Select the element on the Canvas that you would like to be fixed.

2) Look to the Properties palette and find the Position section. Then, tick the 'Display Pin Position' box.

134c239726a3c4a0e5ec9cc8e208d6e2

3) Look to the 'Y' parameter and from the dropdown, choose 'pin to top'.

3c5b702792e642219a5f4d0bb8711f94


That's it! You can also pin an element along the X axis by clicking on the 'X' parameter dropdown.

2ea7f77c49f2b9bac6d90611509e2ffe

Leave a Comment
 
Attach a file