Skip to content

Instantly share code, notes, and snippets.

@fengliu222

fengliu222/gpvgXr.markdown

Created July 1, 2015 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fengliu222/840b714796e43110bbfe to your computer and use it in GitHub Desktop.
Save fengliu222/840b714796e43110bbfe to your computer and use it in GitHub Desktop.
Download ZIP
gpvgXr
Raw
index.html
<html ng-app="ion-sticky-demo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ion-sticky</title>
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
<script src="http://poordeveloper.github.io/ion-sticky/ion-sticky.js"></script>
<script>
angular.module('ion-sticky-demo', ['ion-sticky']);
angular.module('ion-sticky-demo')
.controller("indexCtrl",function($scope,$ionicScrollDelegate){
var oldTarget={}
$scope.touchList = function(e){
if(e.target&&oldTarget!=e.target){
oldTarget=e.target;
currentId = angular.element(e.target).attr("c-id")
cpx = getPositionInParent(document.getElementById(currentId),document.getElementById("contacts"))
console.log(cpx)
if(cpx&&cpx.top){
$ionicScrollDelegate.$getByHandle('scoller').scrollTo(0,cpx.top)
}
}
}
})
function getPositionInParent(el, parentEl) {
if(el){
return { left: el.offsetLeft, top: el.offsetTop };
}
}
</script>
</head>
<body ng-controller='indexCtrl'>
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">ion-sticky demo</h1>
</ion-header-bar>
<!-- or <ion-scroll> -->
<ion-content ion-sticky delegate-handle="scoller">
<ion-list id="contacts">
<ion-item class="item-divider" id="divider-A"> A </ion-item>
<ion-item> A1 </ion-item>
<ion-item> A2 </ion-item>
<ion-item> A3 </ion-item>
<ion-item> A4 </ion-item>
<ion-item> A5 </ion-item>
<ion-item> A6 </ion-item>
<ion-item> A7 </ion-item>
<ion-item> A8 </ion-item>
<ion-item class="item-divider" id="divider-B"> B </ion-item>
<ion-item> B1 </ion-item>
<ion-item> B2 </ion-item>
<ion-item> B3 </ion-item>
<ion-item> B4 </ion-item>
<ion-item> B5 </ion-item>
<ion-item> B6 </ion-item>
<ion-item> B7 </ion-item>
<ion-item> B8 </ion-item>
<ion-item class="item-divider" id="divider-C"> C </ion-item>
<ion-item> C1 </ion-item>
<ion-item> C2 </ion-item>
<ion-item> C3 </ion-item>
<ion-item> C4 </ion-item>
<ion-item> C5 </ion-item>
<ion-item> C6 </ion-item>
<ion-item> C7 </ion-item>
<ion-item> C8 </ion-item>
<ion-item class="item-divider" id="divider-D"> D </ion-item>
<ion-item> D1 </ion-item>
<ion-item> D2 </ion-item>
<ion-item> D3 </ion-item>
<ion-item> D4 </ion-item>
<ion-item> D5 </ion-item>
<ion-item> D6 </ion-item>
<ion-item> D7 </ion-item>
<ion-item> D8 </ion-item>
<ion-item class="item-divider" id="divider-E"> E </ion-item>
<ion-item> E1 </ion-item>
<ion-item> E2 </ion-item>
<ion-item> E3 </ion-item>
<ion-item> E4 </ion-item>
<ion-item> E5 </ion-item>
<ion-item> E6 </ion-item>
<ion-item> E7 </ion-item>
<ion-item> E8 </ion-item>
<ion-item class="item-divider"> F </ion-item>
<ion-item> F1 </ion-item>
<ion-item> F2 </ion-item>
<ion-item> F3 </ion-item>
<ion-item> F4 </ion-item>
<ion-item> F5 </ion-item>
<ion-item> F6 </ion-item>
<ion-item> F7 </ion-item>
<ion-item> F8 </ion-item>
</ion-list>
</ion-content>
<ion-list style="position:absolute;right:20px;top:20%" on-drag="touchList($event)">
<ion-item c-id="divider-A">
a
</ion-item>
<ion-item c-id="divider-B">
b
</ion-item>
<ion-item c-id="divider-C">
c
</ion-item>
<ion-item c-id="divider-D">
d
</ion-item>
<ion-item>
e
</ion-item>
<ion-item>
f
</ion-item>
<ion-item>
g
</ion-item>
<ion-item>
h
</ion-item>
<ion-item>
i
</ion-item>
<ion-item>
j
</ion-item>
</ion-list>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment