We will leave the background of the navigation bar as transparent and add an empty text element behind the navigation bar. The background of the text element will become white only when it is pinned to the top together with the navigation bar as shown below.
For illustration, we also set the background color of the page to "#ECF7FB". For how to change the background color of a page, you can check out the steps about adding background color in this tutorial "Add background color and image to a page".
If the navigation bar is at the top of the page rather than below the logo, this approach still works. The background of the text element will become white when the page starts to scroll and the text element is pinned to the top.
Open the website created using the Sample Template and open the page "template.html".
Insert an empty text element on the page and set the background color to #FFFFFF (white) by following the steps in this tutorial "Add background color to a text element".
We want the background color of the element to become white gradually only when it is pinned to the top of the page. We will create a new style to do this. Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "transition" by clicking on the "Rename" button or pressing the "F2" key.
Click on the "Effects" tab on the left and select the option "Transition". As the default settings work for us, there is no need to change the values.
Now we are going to make the white background appear only when the text element is pinned to the top. Select the style "background" on the right. This style adds a white background to the text element.
Click on the "Selectors" tab on the left and select the option "Before selectors". Enter the text ".sticky ". Please note that there is a space after the text. The preview panel will show what the selectors will be when combining with the name of the style.
Click on the OK button to save the styles.
The new style "transition" will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
The background of the text element becomes transparent when it is not pinned to the top.
Now we need to apply the style "transition" to the text element. Drag the style "transition" from the "Available CSS Styles" and drop it to the text element on the page. If the text element is already selected, you can just drag the style "transition" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
Resize the text element to 900 x 34 and move it to 0 pixels from the left and 70 pixels from the top.
Right-click on it and select "Expand to Browser Window Width" from the context menu. The following dialog will appear. Select the option and then click on the OK button. The text element will be expanded to the width of the browser window.
While the text element is still selected, click on this button on the toolbar to place the text element behind the navigation bar. Deselect the element by clicking on the blank area of the page and then click on the navigation bar again. As the text element is now behind the navigation bar, so only the navigation bar is selected.
Press the CTRL key and click on the blank area behind the navigation bar so that both the navigation bar and the text element are selected like the following.
Click on this button on the toolbar and you will see the following message, notifying you that they are added to the sticky header.
Save this page and preview the page "index.html".
Before reaching the top, it will look like this:
After reaching the top, the white background will be applied to the text element with a transition effect:
As the text element is empty, it will be hidden in mobile layout by default. This is the desired effect as the text element is not needed in mobile layout because the navigation bar will cover the full width of the browser window like the following.
on the toolbar. 
on the toolbar to place the text element behind the navigation bar. Deselect the element by clicking on the blank area of the page and then click on the navigation bar again. As the text element is now behind the navigation bar, so only the navigation bar is selected.
on the toolbar and you will see the following message, notifying you that they are added to the sticky header.
