Sticky Header in Page Control

How-to Discussions
1

Hi Fuse people,
I need your help.

This is the example I created for you:

<App>

	<JavaScript>
	let Observable = require("FuseJS/Observable");

	let Pages = Observable();
	let ActivePage = Observable(0);
	let FirstPage = Observable(true);
	let LastPage = Observable(false);

	ActivePage.onValueChanged(module, newValue => {
		FirstPage.value = newValue == 0;
	});

	ActivePage.onValueChanged(module, newValue => {
		LastPage.value = newValue == 2;
	});

	function Page(Title) {
		this.Title = Title;
	}

	function Next() {
		ActivePage.value = ActivePage.value +1;
	}

	function Previous() {
		ActivePage.value = ActivePage.value -1;
	}

	module.exports = {
		ActivePage,
		Next,
		Previous,
		FirstPage,
		LastPage,

	};
	</JavaScript>

	<Panel>
		<ScrollView>

			<Panel Margin="0,260,0,-260">

				<DockPanel ux:Name="arrows" Alignment="Top" Height="60">
					<WhileFalse Value="{FirstPage}">
						<Panel Padding="24,0" Dock="Left" HitTestMode="LocalBoundsAndChildren">
							<Text Value="back" FontSize="24" Alignment="VerticalCenter"/>
							<Clicked Handler="{Previous}" />
						</Panel>
					</WhileFalse>

					<WhileFalse Value="{LastPage}">
						<Panel Padding="24,0" Dock="Right" HitTestMode="LocalBoundsAndChildren">
							<Text Value="next" FontSize="24" Alignment="VerticalCenter"/>
							<Clicked Handler="{Next}" />
						</Panel>
					</WhileFalse>
				</DockPanel>

				<PageControl ActiveIndex="{ActivePage}">

					<Each Count="3">

						<Page HitTestMode="LocalBoundsAndChildren">

							<Panel ux:Name="title" Height="60" Color="White" Alignment="Top">
								<Text Value="PAGE TITLE" TextAlignment="Center" Alignment="VerticalCenter" FontSize="24"/>
							</Panel>

							<StackPanel ux:Name="content" Margin="0,60,0,0" Color="White" ItemSpacing="20">
								<Each Count="20">
									<Rectangle Height="60" Color="Red" />
								</Each>
							</StackPanel>

							<ScrollingAnimation From="260" To="260 + height(content)">
								<Move Target="title" Y="1" RelativeTo="Size" RelativeNode="content" />
								<Move Target="arrows" Y="1" RelativeTo="Size" RelativeNode="content" />
							</ScrollingAnimation>
						</Page>

					</Each>
				</PageControl> 
			</Panel>
		</ScrollView>

		<Panel Height="200" Color="Blue" Alignment="Top" Padding="24">
			<Text Value="Content that goes behind when scrolling" TextColor="White" FontSize="40" TextWrapping="Wrap"/>
		</Panel>
	</Panel>
</App>

Here a screen capture of the example:

As you can see from the example, I’d like to scroll up the page and have the page title and button “next” stick to the top part of the screen. It all works perfectly, but as soon as I change page (by clicking on “next”), the button “next” and the button “back” behave in a weird way.

Here another screen capture with the final app:

As you can see I have the same exact issue here.
Thank you

2

Hi Denise,

it’s not weird at all. Somewhat confusing, yes.

What happens there is that this block of code

<ScrollingAnimation From="260" To="260 + height(content)">
    <Move Target="title" Y="1" RelativeTo="Size" RelativeNode="content" />
    <Move Target="arrows" Y="1" RelativeTo="Size" RelativeNode="content" />
</ScrollingAnimation>

is instantiated 3 times - just as many as there are pages.

Now, the title element is local to all respective pages, so it gets Moved just right. However, the arrows element is outside of the Page data context, which means that ultimately you end up having 3 ScrollingAnimations affecting the same element simultaneously, resulting in them travelling down 3x more than what you wanted.

The solution might be to move the arrows inside of the title element, or perhaps making a ux:Class component for the pages that accepts the arrows via ux:Dependency.

3

Thank you for the answer,
I understand what you’re saying, but moving the arrows inside of the title element will make them move with the pages (they will not be fixed in the page but will act exactly as an element in the page). What I wanted to achieve was having the arrows outside of the pages. I will try with the ux:Dependency :slight_smile: