In fact, this instruction can be used for almost all layout controls like Header, Container, etc to which you can apply Fix on Scroll Extension.
In most of cases it is needed for Header. So, in this example we will use Header.

The "Fix on Scroll" extension turns ONposition: fixed; of the control to which this extension is added. It is used to make the control "sticky" at the top or bottom.
This extension uses Bootstrap Affix:
http://getbootstrap.com/javascript/#affix

fix-on-scroll-1.png

Here is how it works (let's consider the example with Header).
When you enable "Fix in Scroll" extension Themler wraps the appropriate control with a special effect container.

Before:

<header>
....
</header>

After:

<div data-affix="" data-offset="" data-fix-at-screen="top" data-clip-at-control="top" data-enable-lg="" data-enable-md="" data-enable-sm="" class="bd-affix-2 bd-no-margins bd-margins affix-top">
<header>
....
</header>
</div>

Please pay attention to the affix-top class used by the affix wrapper. This class will be used to create our resizing effect.

To start, the extension adds affix-top class to indicate that the element is in its most top position.
By scrolling past the element you want to "stick" the extension triggers the actual affixing. At this stage the affix-top is replaced with the class affix.
When you scroll the page up to the most top point the class is changed back to affix-top.

Now you know how this extension works. Based on this you can not only change the height but affect the appearance and position of the controls inside. The example below is a particular case of using this feature.


So, our particular example with changing Header height is based on changing these classes.

  1. Navigate to Header and enable "Fix on scroll" extension.

  2. In this example the height of the Header will be set to the affix container, not the Header itself. We did it to avoid possible conflicts with existing Header height. And it's more universal.
    To set the Initial height of the affix container (at the most top point) add the following code to the Home tab >> Settings >> Additional CSS. For example:
    .affix-top
    {
    height: 250px;
    }

  3. Set Header height to 100%. In the default theme there are Section and Container inside Header. We need to set 100% height to these controls too. All of them should be stretched to the height of the Affix container.

    fix-on-scroll-2.png

  4. To make our example look better let's change the Positioning of the Logo and Menu:

    fix-on-scroll-3.png

  5. Here we also added a background to the Affix container so that changing on scroll is better visible.

    fix-on-scroll-4.png

    NOTE: The affix background will be visible only in case if all other inner containers (Header, Section and Container) will not have own background. Otherwise you will not see the affix background.

  6. Set the height of the affix container on scroll and add the following code to the Home tab >> Settings >> Additional CSS. For example:
    .affix
    {
    height: 100px!important;
    }

    Please don't forget to add !important rule.

  7. Here is a result on scroll:

    fix-on-scroll-5.png

  8. To make the scrolling smooth we need to enable transition:

    fix-on-scroll-6.png

That's all.

Example 1. Change Logo Height.

Let's take our original example and change the height of the Logo with height of the Header on scroll.

In the original example I changed the height of the Logo to make it look bigger:

logo-height.png

To make the small Logo on scroll you need to add css which describes the behavour of Logo on scroll:

.affix [class*="bd-logo"]
{
height: 35px;
}

Here is result on scroll:

logo-height-2.png

To change the height smoothly we need to add css transition:

.affix [class*="bd-logo"]
{
height: 35px;
-webkit-transition: height 300ms linear;
transition: height 300ms linear;
}

to smoothly change the height back add back transition:

.affix-top [class*="bd-logo"]
{
-webkit-transition: height 300ms linear;
transition: height 300ms linear;
}

- [General Example](#general) - [Example 1](#example-1) In fact, this instruction can be used for almost all layout controls like Header, Container, etc to which you can apply **Fix on Scroll** Extension. In most of cases it is needed for Header. So, in this example we will use Header. The "Fix on Scroll" extension turns ON`position: fixed;` of the control to which this extension is added. It is used to make the control "sticky" at the top or bottom. This extension uses Bootstrap Affix: http://getbootstrap.com/javascript/#affix !fix-on-scroll-1.png! Here is how it works (let's consider the example with Header). When you enable "Fix in Scroll" extension Themler wraps the appropriate control with a special effect container. **Before**: <header> .... </header> **After**: <div data-affix="" data-offset="" data-fix-at-screen="top" data-clip-at-control="top" data-enable-lg="" data-enable-md="" data-enable-sm="" class="bd-affix-2 bd-no-margins bd-margins affix-top"> <header> .... </header> </div> Please pay attention to the `affix-top` class used by the affix wrapper. This class will be used to create our resizing effect. To start, the extension adds `affix-top` class to indicate that the element is in its most top position. By scrolling past the element you want to "stick" the extension triggers the actual affixing. At this stage the `affix-top` is replaced with the class `affix`. When you scroll the page up to the most top point the class is changed back to `affix-top`. Now you know how this extension works. Based on this you can not only change the height but affect the appearance and position of the controls inside. The example below is a particular case of using this feature. <a id="general"></a> So, our particular example with changing Header height is based on changing these classes. 1. Navigate to Header and enable "Fix on scroll" extension. 2. In this example the height of the Header will be set to the affix container, not the Header itself. We did it to avoid possible conflicts with existing Header height. And it's more universal. To set the Initial height of the affix container (at the most top point) add the following code to the **Home tab** >> **Settings** >> **Additional CSS**. For example: `.affix-top { height: 250px; }` 3. Set Header height to *100%*. In the default theme there are Section and Container inside Header. We need to set 100% height to these controls too. All of them should be stretched to the height of the Affix container. !fix-on-scroll-2.png! 4. To make our example look better let's change the Positioning of the Logo and Menu: !fix-on-scroll-3.png! 5. Here we also added a background to the Affix container so that changing on scroll is better visible. !fix-on-scroll-4.png! **NOTE:** The affix background will be visible only in case if all other inner containers (Header, Section and Container) will not have own background. Otherwise you will not see the affix background. 6. Set the height of the affix container on scroll and add the following code to the **Home tab** >> **Settings** >> **Additional CSS**. For example: `.affix { height: 100px!important; }` Please don't forget to add `!important` rule. 7. Here is a result on scroll: !fix-on-scroll-5.png! 8. To make the scrolling smooth we need to enable transition: !fix-on-scroll-6.png! That's all. <a id="example-1"></a> ### Example 1. Change Logo Height. Let's take our original example and change the height of the Logo with height of the Header on scroll. In the original example I changed the height of the Logo to make it look bigger: !logo-height.png! To make the small Logo on scroll you need to add css which describes the behavour of Logo on scroll: `.affix [class*="bd-logo"] { height: 35px; }` Here is result on scroll: !logo-height-2.png! To change the height smoothly we need to add css transition: `.affix [class*="bd-logo"] { height: 35px; -webkit-transition: height 300ms linear; transition: height 300ms linear; }` to smoothly change the height back add back transition: `.affix-top [class*="bd-logo"] { -webkit-transition: height 300ms linear; transition: height 300ms linear; }`