<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .RadTabStrip_Outlook {
        position: relative !important;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <table>
            <tr>
                <td valign="top">
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="Outlook"
                        MultiPageID="RadMultiPage1" Orientation="VerticalLeft">
                        <Tabs>
                            <telerik:RadTab Text="tab 1" />
                            <telerik:RadTab Text="tab 2" />
                            <telerik:RadTab Text="tab 3" />
                        </Tabs>
                    </telerik:RadTabStrip>
                </td>
                <td valign="top">
                    <telerik:RadMultiPage runat="server" CssClass="multiPage" ID="RadMultiPage1" SelectedIndex="0">
                        <telerik:RadPageView runat="server" ID="PageView1">
                            <div style="width: 200px; height: 1500px; background-color: red">
                                test</div>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView2">
                            tab 2</telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView3">
                            tab 3</telerik:RadPageView>
                    </telerik:RadMultiPage>
                </td>
            </tr>
        </table>

        <script type="text/javascript">
           window.onscroll=function()
           {
               var ScrollTop = f_scrollTop();
               var tabStrip = document.getElementById("RadTabStrip1");
               tabStrip.style.position = "relative";
               tabStrip.style.posTop = ScrollTop + "px";
               tabStrip.style.top = ScrollTop + "px";   
           }
           
           function f_scrollTop() {
	            return f_filterResults (
		            window.pageYOffset ? window.pageYOffset : 0,
		            document.documentElement ? document.documentElement.scrollTop : 0,
		            document.body ? document.body.scrollTop : 0
	                );
            }
            function f_filterResults(n_win, n_docel, n_body) {
	            var n_result = n_win ? n_win : 0;
	            if (n_docel && (!n_result || (n_result > n_docel)))
		            n_result = n_docel;
	            return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
            }

        // function scrolFunc(sender, args)
        // {
        //    debugger
        // }
        </script>

    </form>
</body>
</html>
