Well, the plugin doesn't work for me. The truth is I don't know what to try anymore, because in all the tutorials I've seen they put everything the same and it works for them but not for me. I've even copied the code from those tutorials to a new project and it worked, so there's something I'm missing. I leave you my index.htmland my style sheet where I define everything.
index.html:
<!DOCTYPE html>
<html ng-app="missingDog2">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Missing Dog 2</title>
<script src="resources/dependencies/angular.min.js"></script>
<script src="resources/dependencies/angular-route.min.js"></script>
<script src="resources/dependencies/angular-resource.min.js"></script>
<script src="resources/app/js/app.js"></script>
<script src="resources/app/js/Services/MascotaService.js"></script>
<script src="resources/app/js/Controllers/MainController.js"></script>
<script src="resources/app/js/Controllers/FormController.js"></script>
<link href="resources/dependencies/bootstrap.min.css" rel="stylesheet">
<link href="resources/dependencies/bootstrap-theme.min.css" rel="stylesheet">
<link href="resources/app/css/mystyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header class="page-header row-header">
<div class="container-fluid row-header">
<div class="row row-header well">
<!-- HEADER IMAGE -->
<div class="col-xs-1">
<img ng-src="resources/app/images/beagles.png" id="imgHeader" alt="Missing Dog 2" class="img-rounded img-responsive"/>
</div>
<!-- HEADER TITLE AND TEXT -->
<div class="col-xs-11">
<h1><a href="#home">Missing Dog</a></h1>
<p>
Missing Dog is a community that ensures support and charity towards stray dogs.
It's a pleasure to help you find your lost pet!
</p>
</div>
</div>
</div>
<nav class="navbar navbar-default row-header" role="navigation" data-spy="affix" data-offset-top="104.97">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 navbar-header">
<a class="navbar-brand" href="#home">Missing Dog</a>
</div>
<ul class="col-lg-10 navbar-nav nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#form">Report a Missing Dog</a></li>
<li><a href="#view">View the Missing Dogs</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="mainContent" class="container-fluid">
<!-- HOME -->
<section id="home" class="row row-content">
<div class="col-xs-offset-3 col-xs-7 well">
<div class="col-xs-6">
<img alt="Missing Dog 2" ng-src="resources/app/images/dog-brown.jpg" class="img-thumbnail img-responsive">
</div>
<div class="col-xs-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, repellendus.
Quae enim, aspernatur odit beatae illo, placeat earum impedit magni veniam.
Laboriosam aperiam esse eum dolorem amet ipsum sapiente odit. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Mollitia soluta eaque velit? Quam quasi, at voluptate dicta dignissimos,
quibusdam reiciendis, rem aut amet quos ut dolore blanditiis, doloremque velit mollitia! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Animi minus inventore corporis quasi! Nam eius quos aut dolore
quibusdam quis placeat, quia, inventore dolor amet, soluta molestiae mollitia dicta praesentium. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Alias et impedit, natus fuga sit earum hic reiciendis
cupiditate atque dignissimos aperiam magnam esse eum, quibusdam id illum facilis optio! Eaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus veritatis natus sed ipsa, recusandae
doloribus cupiditate, incidunt. Impedit nam rerum sed doloremque nisi quasi non dolores eius. Odit ad,
repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odit, veniam magnam quia
dignissimos itaque eos reiciendis labore quasi, architecto facere amet nobis blanditiis eveniet.
Earum temporibus non doloribus ex.
</p>
</div>
</div>
</section>
<!-- FORM FOR REPORTING MISSING DOGS -->
<section id="form" class="row row-content" ng-controller="FormController">
<div class="well col-xs-offset-3 col-xs-7">
<div class="col-xs-offset-4 col-xs-8">
<h1>Report a Missing Dog</h1>
</div>
<div class="col-xs-offset-1 col-xs-11"> <!-- col-xs-offset-1 -->
<form class="form-horizontal" name="mascotasForm" ng-submit="guardar()">
<div class="form-group">
<label class="control-label col-xs-2" for="name">Name: </label>
<div class="col-xs-8">
<input class="form-control" name="name" type="text" required placeholder="Name of the dog" ng-model="mascota.nombre" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="race">Race: </label>
<div class="col-xs-8">
<input class="form-control" name="race" type="text" required placeholder="Race of the dog" ng-model="mascota.raza" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="description">Description: </label>
<div class="col-xs-8">
<input class="form-control" name="description" type="text" required placeholder="A little description" ng-model="mascota.descripcion" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="lostPlace">Place where pet has lost: </label>
<div class="col-xs-8">
<input class="form-control" name="lostPlace" type="text" required placeholder="Place where you lost your dog" ng-model="mascota.lugar" /> <br/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2 col-xs-offset-3">
<input class="form-control" type="submit" value="Report" />
</div>
<div class="col-xs-2">
<input class="form-control" type="reset" value="Cancel" />
</div>
</div>
</form>
</div>
</div>
</section>
<!-- LIST OF MISSING DOGS -->
<section id="view" class="row row-content" ng-controller="MainController">
<div class="col-xs-offset-3 col-xs-7 well">
<div class="col-xs-offset-3 col-xs-9">
<h1>View the list of Missing Dogs</h1>
</div>
<div class="col-xs-offset-2 col-xs-10">
<div class="form-group">
<label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
<div class="col-xs-8 col-xs-offset-1">
<input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
</div>
</div>
<div class="col-xs-10">
<table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
<thead>
<tr>
<th>Name</th>
<th>Race</th>
<th>Description</th>
<th>Place</th>
<th>¿Found?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mascota in mascotas | filter: {raza : query}">
<td>{{ mascota.nombre }}</td>
<td>{{ mascota.raza }}</td>
<td>{{ mascota.descripcion }}</td>
<td>{{ mascota.lugar }}</td>
<td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)">Lost</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer class="row-footer">
<div class="container">
<div class="row">
<p class="text-center">© Copyrigth 2016 Missing Dog</p>
</div>
</div>
</footer>
<script scr="resources/dependencies/jquery-3.1.0.min.js"></script>
<script scr="resources/dependencies/bootstrap.min.js"></script>
</body>
</html>
mystyles.css:
body {
position: relative;
color: #0ee6f1;
font-family: "Ubuntu", sans-serif;
}
h1 a:link {
text-decoration: none;
}
#mainContent {
background-image: url("../images/dogs-greenfield2.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
#imgHeader {
max-width: 126.91px;
max-height: 95px;
margin: 15px 15px;
}
.row-header {
margin: 0 auto;
padding: 0;
}
.row-content {
margin: 0 auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height: 400px;
}
.row-footer {
background-color: #b1cbbb;
color: floralwhite;
margin: 0 auto;
padding: 20px 0px 20px 0px;
}
.well {
background: #b1cbbb;
color: floralwhite;
}
.table-striped > tbody > tr:nth-child(odd){
background-color: #b5d2b9;
}
.affix {
top: 0;
width: 100%;
}
Your code seems to work without any modifications (just adding a
z-index:1para el.affixso that it is above the rest of the elements):What makes me think that if it doesn't work for you is because there is a conflict of some kind:
.affixo.affix-topen ninguna de las hojas de estilos (la del theme o la de mystyles.css).