How to Scroll with Ionic and Have Fixed Content Above

How to scroll with ionic and have fixed content above

Move your video directive out of ion-content (all elements in ion-content will be scrolled).
Change the css of ion-content so that it does not occupy the upper half of the screen.
Add position:fixed and other css to your video directive, so that it takes up the upper half of your screen.

HTML:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Fixed Element at Top</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic Fixed Element at Top</h1>
    </ion-header-bar>

    <div class="fixed-header my-video">
       My fixed video content
    </div>
    <ion-content class="ion-content-below-my-video">
      <ion-list>
        <ion-item>1</ion-item>
        <ion-item>2</ion-item>
        <ion-item>3</ion-item>
        <ion-item>4</ion-item>
        <ion-item>5</ion-item>
        <ion-item>6</ion-item>
        <ion-item>7</ion-item>
        <ion-item>8</ion-item>
        <ion-item>9</ion-item>
        <ion-item>0</ion-item>
        <ion-item>1</ion-item>
        <ion-item>2</ion-item>
        <ion-item>3</ion-item>
        <ion-item>4</ion-item>
        <ion-item>5</ion-item>
        <ion-item>6</ion-item>
        <ion-item>7</ion-item>
        <ion-item>8</ion-item>
        <ion-item>9</ion-item>
        <ion-item>0</ion-item>
      </ion-list> 
    </ion-content>

  </body>
</html>

CSS:

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.fixed-header{
  margin-top:43px;
  /* 
   The ionic header bar is 43px in height,
   put your content below the header bar.
  */
}

.platform-webview.platform-ios.platform-cordova .fixed-header{
  margin-top:63px;
  /* On iOS, moving a div out of ion-content,
  I think you need to compensation for the 20px system status bar.
  so it's 43px+20px=63px. but I'm not so sure, it hasn't been tested.
  Test it yourself and make modifications if needed.
  */
}

.my-video
{
  height:200px;
  width:100%;
  position:absolute;
  background:grey;
  color:red;
  text-align:center;
  padding:20px;
}

.ion-content-below-my-video{
  margin-top:200px!important;
}

.platform-webview.platform-ios.platform-cordova .ion-content-below-my-video{
  margin-top:220px;
  /*
  Same as .fixed-header
  */
}

Code pen here:

http://codepen.io/KevinWang15/pen/QNJEXX

Fixed top content with scrollable list view ionic

The best option if you want to have headers and sub-headers with a different heights - as in your situation - is to use sass and customize the variables.

From the directory of your app you can run:

ionic setup sass

and ionic would create the scss files and the gulp task associated.

As you can see here the height of the subheader

$bar-subheader-height: $bar-height !default;

is equal to the height of the header: 44px:

$bar-height: 44px !default;

You could change the value for $bar-subheader-height adding a line in the ionic.app.scss file (folder scss):

$bar-subheader-height: 150px;

and the gulp task would compile into the modified css file.

The other option is to redefine the css rules. As you can see in this plunker

I have headers and sub-headers (using the same directives ion-header-bar):

  <ion-view>

    <ion-header-bar class="bar-stable">
      <h1 class="title">Awesome App</h1>
    </ion-header-bar>

    <ion-header-bar class="bar bar-subheader">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" align="center" ng-model="newmsg" placeholder="Title">
        </label>
        <button class="button button-small  button-button-outline button-balanced" ng-click="insert(newmsg)">Add</button>
      </div>

      <div class="item item-input-inset">
        <ti-segmented-control on-select="tapChanged($index)" style="width: 100%;">
          <ti-segmented-control-button class="button-balanced" title="'title 1'" selected> </ti-segmented-control-button>
          <ti-segmented-control-button class="button-balanced" title="'title 2'"></ti-segmented-control-button>
        </ti-segmented-control>
      </div>

    </ion-header-bar>

    <ion-content class="has-subheader">

      <ion-list>
        <ion-item class="item" ng-repeat="item in items">{{item.name}}</ion-item>
      </ion-list>

    </ion-content>

  </ion-view>

in the css I have created 2 styles which are going to be applied to the second <ion-header-bar> and the <ion-content>:

.bar-subheader
{
  height: 114px !important;
  border: none;

}

.has-subheader {
    top: 160px !important;
}

As you can see it works as expected but you might run in some odd behaviour. I would suggest to go for the sass variables.

UPDATE:

If you only want to change the behaviour in one page you can customize the bar-subheader element:

.bar-subheader.custom
{
  height: 114px !important;
  border: none;
}

and define a custom has-subheader:

.has-subheader-custom {
    top: 160px !important;
}

Which you're going to reference here:

<ion-header-bar class="bar bar-subheader custom">

and here:

<ion-content class="has-subheader-custom">

and this plunker should guide you.

Scrolling ion-content is scrolling header and tabs wrongly

Add this line to your config.xml and then do a clean build and it should work as expected

<preference name="DisallowOverscroll" value="true"/>

Reference

How to Scroll with Ionic and Have Fixed Content Above