Estoy trabajando sobre un snippet que encontré en Codepen, le hice unos cambios muy pequeños. Quisiera que el input text que funciona a modo de Buscador quedara siempre fijo en la posición superior del listado cuando haga scroll.
De esta forma si el usuario quiere buscar un dato siempre esté presente y no tenga que desplazarse hasta el inicio del listado.
Trabajando en el snippet lo pueden notar por ustedes mismos.
var myApp = angular.module('myApp', ['ngRoute'])
//ng-route config
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'default.html',
})
.when('/contact-info/:contact_index', {
templateUrl: 'contact_info.html',
controller: 'contactInfoCtrl'
})
.when('/add', {
templateUrl: 'contact_form.html',
controller: 'addContactCtrl'
})
.when('/edit/:contact_index', {
templateUrl: 'contact_form.html',
controller: 'editContactCtrl'
})
.otherwise({
redirectTo: '/home'
});
})
// controllers
.controller('navCtrl', function($scope) {
$scope.nav = {
navItems: ['home', 'add'],
selectedIndex: 0,
navClick: function($index) {
$scope.nav.selectedIndex = $index;
}
};
})
.controller('homeCtrl', function($scope, ContactService) {
$scope.contacts = ContactService.getContacts();
$scope.removeContact = function(item) {
var index = $scope.contacts.indexOf(item);
$scope.contacts.splice(index, 1);
$scope.removed = 'Contact successfully removed.';
};
})
.controller('contactInfoCtrl', function($scope, $routeParams) {
var index = $routeParams.contact_index;
$scope.currentContact = $scope.contacts[index];
})
.controller('addContactCtrl', function($scope, $location) {
//needed to show the correct button on the contact form
$scope.path = $location.path();
$scope.addContact = function() {
var contact = $scope.currentContact;
contact.id = $scope.contacts.length;
$scope.contacts.push(contact);
};
})
.controller('editContactCtrl', function($scope, $routeParams) {
$scope.index = $routeParams.contact_index;
$scope.currentContact = $scope.contacts[$scope.index];
})
// directives
.directive('contact', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'contact.html'
}
})
// services
.factory('ContactService', [function() {
var factory = {};
factory.getContacts = function() {
return contactList;
}
// contact list, usually would be a separate database
var contactList = [
{
id: 0,
name: 'Pablo',
phone: 'Teléfono: 1456789',
regional: 'Centro'
},
{
id: 1,
name: 'Luis',
phone: 'Teléfono: 14589',
regional: 'Sur'
},
{
id: 2,
name: 'Maria',
phone: 'Teléfono: 1785789',
regional: 'Norte'
},
{
id: 3,
name: 'Adriana',
phone: 'Teléfono: 144419',
regional: 'Centro'
},
{
id: 4,
name: 'Carmen',
phone: 'Teléfono: 7896789',
regional: 'Norte'
},
{
id: 5,
name: 'Juan',
phone: 'Teléfono: 057789',
regional: 'Centro'
},
{
id: 6,
name: 'Mario',
phone: 'Teléfono: 1459',
regional: 'Sur'
},
{
id: 7,
name: 'Alejandra',
phone: 'Teléfono: 14524789',
regional: 'Centro'
},
{
id: 8,
name: 'Jhon',
phone: 'Teléfono: 6969',
regional: 'Centro'
},
{
id: 9,
name: 'Maduro',
phone: 'Teléfono: 666',
regional: 'Venezuela'
},
{
id: 10,
name: 'Donald',
phone: 'Teléfono: 9898',
regional: 'iunaites'
},
];
return factory;
}]);
#ignorar {
opacity: 0.1;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron" id="ignorar">
<div class="container">
<h1>Listado de Contactos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui nisl. Aliquam dignissim, eros a semper pharetra, dui libero tempor enim, et blandit libero odio eu ante. Ut maximus, lectus at vulputate malesuada, ex velit posuere leo, non
gravida sapien purus in nulla.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="global-wrapper" ng-app="myApp">
<div class="container" style="padding: 30px 50px 30px 50px;">
<div class="row panel panel-primary" ng-controller="homeCtrl">
<div class="panel-heading">
</div>
<!-- contact list -->
<div class="col-xs-5 panel-body scrollbar" id="style-2" style="overflow: auto; max-height: 400px;">
<ul class="list-group">
<li class="list-group-item">
<input class="form-control" placeholder="Búsqueda" type="text" ng-model="searchText"><br>
<contact class="list-group-item" ng-repeat="contact in contacts | orderBy: 'name' | filter: searchText "></contact>
</li>
</ul>
</div>
<!-- ng-view below -->
<div class="col-xs-7">
<div class="list-group panel-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
<!-- html templates used by angular, usually in separate files -->
<script type="text/ng-template" id="default.html">
<div class="alert alert-success text-center" ng-class="{hidden : !removed}"> {{removed}}</div>
<div class="list-group-item text-center">Seleccione un contacto para ver su información</div>
</script>
<!-- template for displaying a contacts info -->
<script type="text/ng-template" id="contact_info.html">
<div class="list-group-item">
<h3 class="text-center">{{currentContact.name}}</h3>
<hr><br>
<p>{{currentContact.phone}}</p>
<p>{{currentContact.email}}</p>
<p>{{currentContact.cargo}}</a>
</p>
<p>{{currentContact.dependencia}}</p>
<p>{{currentContact.regional}}</p>
</div>
</script>
<!-- template used for the ng-repeat in the contact list -->
<script type="text/ng-template" id="contact.html">
<a ng-href="#/contact-info/{{contacts.indexOf(contact)}}">
{{contact.name}}
</a>
</script>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js'></script>
Lo que intenté en un principio fue aplicar position: fixed
, el input ocupó todo el ancho del contenedor (lo arreglé definiendo un ancho) pero al hacer scroll sobre la página, el buscador no se quedaba fijo en su posicion respecto al listado sino que lo hace respecto a todo el body.
También traté de sacarlo del wraper del listado pero luego ya no realizaba la función de búsqueda.
En resumen
Que al hacer scroll sobre el listado de contactos, el cuadro de busqueda se quede fijo en su posición
Muchas gracias.