<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<div class="container">
<!--Top-->
<div class="well">
<h1>Below of the fixed nav bar</h1>
</div>
<div class="row" style="border:solid;border-color:#999">
<!-- left side-->
<div class="col-md-3 fixme">
<div class="panel panel-default">
<div class="panel-heading text-center">Left side</div>
<div class="panel-body">
<ul>
<li ng-repeat="cat in [0,1,2,3,4]">{{'title '+ cat}}</li>
</ul>
</div>
</div>
</div>
<div class="col-md-5" id="menu">
<table class="table table-bordered">
<th>#ID</th><th>Name</th>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">Right side</div>
<div class="panel-body">
<table class="table">
<tr><td>sub total</td><td>{{0 |currency}}</td></tr>
<tr><td>tax</td><td>{{0 |currency}}</td></tr>
<tr><td>total</td><td>{{0 |currency}}</td></tr>
</table>
</div>
</div>
</div>
</div>
<!-- right side-->
<footer class="well">
<p>If a space delimits the control word, the space does not appear in the document. Any characters following the delimiter, including spaces, will appear in the document. For this reason, you should use spaces only where necessary; do not use spaces merely to break up RTF code.A group consists of text and control words or control symbols enclosed in braces ({ }). The opening brace ({ ) indicates the start of the group and the closing brace ( }) indicates the end of the group. Each group specifies the text affected by the group and the different attributes of that text. The RTF file can also include groups for fonts, styles, screen color, pictures, footnotes, comments (annotations), headers and footers, summary information, fields, and bookmarks, as well as document-, section-, paragraph-, and character-formatting properties. If the font, file, style, screen-color, revision mark, and summary-information groups and document-formatting properties are included, they must precede the first plain-text character in the document. These groups form the RTF file header. If the group for fonts is included, it should precede the group for styles. If any group is not used, it can be omitted. The groups are discussed in the following sections.</p>
</footer>
</div>
<!-- /container -->
</body>
<script>
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function() { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '10px',
margin:'0px',
});
$('#menu').addClass("col-md-offset-3");
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
$('#menu').removeClass("col-md-offset-3");
}
});
</script>
</html>
// Add your javascript here
var app = angular.module('myapp',[]);
app.controller('testCtrl', function($scope) {
$scope.items =[];
for(var i=0;i<50;i++) {
$scope.items.push({"id" : i,"name":"ItemName "+i});
}
});
/* Put your css in here */
.table tr>td,
.table
{
border-top: none !important;
}