How about. I'm new to programming and after taking a course on site creation in boostrap I had a problem and I do not know how to solve it. The problem is that I have a section within the index that loads some icons and paragraphs when you reach a certain page point, the issue is that when you get to that part the browser (most notorious in a responsive version) makes a jump up and you have It goes down again and when you do it it jumps up again. Once the effects are loaded, there is no problem. I downloaded the practice to a domain ( andami.com.mx ). The truth is that I am new is this WEB and I can not find a solution, I hope you can help me. Thanks.
index
<head>
<title>BIT | Empresa de informática</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Cargando fuentes -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic' rel='stylesheet' type='text/css'>
<!-- Cargando iconos -->
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<!-- Carga de Galeria de imágenes -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- Carga de archivos css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/tether.min.css">
</head>
<body>
<section class="bienvenidos">
<header class="encabezado navbar-fixed-top" role="banner" id="encabezado">
<div class="container">
<a href="index.html" class="logo">
<img src="images/logo.svg" alt="Logo del sitio">
</a>
<button type="button" class="boton-buscar" data-toggle="collapse" data-target="#bloque-buscar" aria-expanded="false">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<button type="button" class="boton-menu hidden-md-up" data-toggle="collapse" data-target="#menu-principal" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i></button>
<form action="#" id="bloque-buscar" class="collapse">
<div class="contenedor-bloque-buscar">
<input type="text" placeholder="Buscar...">
<input type="submit" value="Buscar">
</div>
</form>
<nav id="menu-principal" class="collapse">
<ul>
<li class="active"><a href="index.html">Inicio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<div class="texto-encabezado text-xs-center">
<div class="container">
<h1 class="display-4 wow bounceIn">Expertos en Informática</h1>
<p class="wow bounceIn" data-wow-delay=".3s">Creamos soluciones según las necesidades y requerimientos de nuestros clientes.</p>
<a href="contacto.html" class="btn btn-primary btn-lg">Ponte en contacto</a>
</div>
</div>
<div class="flecha-bajar text-xs-center">
<a data-scroll href="#agencia"> <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</div>
</section>
<section class="agencia py-1" id="agencia">
<div class="container">
<div class="row">
<div class="col-md-8 col-xl-9 wow bounceIn" data-wow-delay=".3s">
<h2 class="h3 text-xs-center text-md-left font-weight-bold">Empresa de informática (T.I)</h2>
<p>BASE IT o mejor conocido por nuestros clientes como “BIT”, es una empresa de informática dedicada a brindar ayuda al público en general, nosotros no buscamos solo nuestro beneficio, vamos mucho más allá, nos preocupamos por dejar de ser un gasto para nuestros clientes, en lugar de eso, nos emociona que nos vean como una solución a sus problemas de tecnología. “BIT” nace de un proyecto universitario, donde nos dimos cuenta de lo mucho que podemos ayudar o aportar a todos los que así lo requieran, desde una persona con problemas en su PC o Laptop, pasando por los pequeños negocios como “Tienditas de la esquina”, farmacias, etcétera, hasta llegar a grandes empresas donde es indispensable un apoyo tecnológico.</p>
</div>
<div class="col-md-4 col-xl-3 wow bounceIn" data-wow-delay=".6s">
<img src="images/agencia.svg" alt="La agencia">
</div>
</div>
</div>
</section>
<section class="tu-mejor-eleccion py-1">
<div class="container">
<h2 class="h3 text-xs-center font-weight-bold">¿Por qué somos
<span>tu mejor elección?</span></h2>
<p class="text-xs-center">
Servicios para empresas y profesionales
</p>
<div class="row">
<ul class="col-xs-6 col-lg-4 text-xs-center text-lg-left">
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay=".3s">
<i class="fa fa-users" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Asesorías informáticas</h4>
<p class="hidden-md-down">Para empresa o profesionales que requiera asesorías simples o complejas</p>
</div>
</li>
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay=".7s">
<i class="fa fa-mobile" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Aplicaciones móviles</h4>
<p class="hidden-md-down">Creación de aplicaciones móviles a la medida de la empresa</p>
</div>
</li>
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay="1.1s">
<i class="fa fa-wifi" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Aplicaciones o sitios WEB</h4>
<p class="hidden-md-down">Creamos desde sitios simples hasta sistemas WEB de administración</p>
</div>
</li>
</ul>
<div class="hidden-md-down col-lg-4">
<img src="images/mundo.svg" alt="Mundo movil">
</div>
<ul class="col-xs-6 col-lg-4 text-xs-center text-lg-right">
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay=".5s">
<i class="fa fa-life-ring" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Soporte técnico</h4>
<p class="hidden-md-down">Soporte técnico profesional para equipos de computo. Por polizas o por evento</p>
</div>
</li>
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay=".9s">
<i class="fa fa-sitemap" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Redes informáticas</h4>
<p class="hidden-md-down">Planeación, administración y ejecución de proyectos de redes</p>
</div>
</li>
<li class="wow zoomIn" data-wow-duration=".3s" data-wow-delay="1.3s">
<i class="fa fa-database" aria-hidden="true"></i>
<div class="contenedor-eleccion">
<h4>Bases de datos</h4>
<p class="hidden-md-down">Administración y gestión de bases de datos SQL</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<main class="servicios py-1">
<div class="container">
<h2 class="text-xs-center font-weight-bold">Otros Servicios</h2>
<div class="row">
<article class="col-md-4 wow bounceInLeft" data-wow-delay=".3s">
<img src="images/servicio-1.svg" alt="Servicio Desarrollo de Aplicaciones Mobiles">
<h3><a href="#"> Desarrollo de Aplicaciones Mobiles </a>
</h3>
<p class="hidden-sm-down">Desarrollamos aplicaciones móviles y plataformas web. Nuestra principal cualidad está en el desarrollo de software a medida de tus necesidades.</p>
<a href="#" class="btn btn-secondary hidden-sm-down">Más información</a>
</article>
<article class="col-md-4 wow bounceInUp" data-wow-delay=".6s">
<img src="images/servicio-2.svg" alt="Servicio Consultoría Tecnológica">
<h3><a href="#">Consultoría Tecnológica</a></h3>
<p class="hidden-sm-down">Ofrecemos consultoría tecnológica especializada en movilidad, necesaria previo al desarrollo de cualquier proyecto.</p>
<a href="#" class="btn btn-secondary hidden-sm-down">Más información</a>
</article>
<article class="col-md-4 wow bounceInRight" data-wow-delay=".9s">
<img src="images/servicio-3.svg" alt="Servicio Marketing y publicidad Movil">
<h3><a href="#">Marketing y publicidad Movil</a></h3>
<p class="hidden-sm-down">Desarrollamos campañas publicitarias para tus APP. Hacemos conocer tu marca en el momento exacto para conseguir un mayor inpacto.</p>
<a href="#" class="btn btn-secondary hidden-sm-down">Más información</a>
</article>
</div>
</div>
</main>
<section class="ultimos-proyectos py-1">
<div class="container">
<h2 class="text-xs-center font-weight-bold">Últimos proyectos</h2>
<div class="owl-carousel">
<a href="#">
<h4>App Lima Travels</h4>
<img src="images/proyecto1.jpg" alt="App Lima Travels">
</a>
<a href="#">
<h4>Apps Uber</h4>
<img src="images/proyecto2.jpg" alt="Apps Uber">
</a>
<a href="#">
<h4>App Pizza Perú</h4>
<img src="images/proyecto3.jpg" alt="App Pizza Perú">
</a>
<a href="#">
<h4>App Muebles Hoy</h4>
<img src="images/proyecto4.jpg" alt="App Muebles Hoy">
</a>
<a href="#">
<h4>App Clima Perú</h4>
<img src="images/proyecto5.jpg" alt="App Clima Perú">
</a>
<a href="#">
<h4>App Playa</h4>
<img src="images/proyecto6.jpg" alt="App Playa">
</a>
</div>
</div>
</section>
<footer class="piedepagina py-1" role="contentinfo">
<div class="container">
<p>2017 © BASE IT Todos los derechos reservados</p>
<ul class="redes-sociales">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true">
</i> </a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</footer>
<a data-scroll class="ir-arriba" href="#encabezado"><i class="fa fa-arrow-circle-up" aria-hidden="true"> </i> </a>
<!-- Carga de archivos JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
nav: true,
autoWidth: false,
navText: ['<i class="fa fa-arrow-circle-left" title="Anterior">
</i>', '<i class="fa fa-arrow-circle-right" title="Siguiente"></i>'],
responsive: {
0: {
items: 1
},
500: {
items: 2,
margin: 20
},
800: {
items: 3,
margin: 20
},
1000: {
items: 4,
margin: 20
}
}
})
</script>
<script src="js/wow.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/sitio.js"></script>
<script src="js/tether.min.js"></script>
</body>
</html>
css
/*-------------------------------
SECCION SERVICIOS
--------------------------------*/
.servicios {
background: url("../images/fondo-servicios.jpg") no-repeat center center;
background-size: cover;
background-attachment: fixed !important;
color: #fff; }
.servicios article {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 1rem 0; }
.servicios img {
-webkit-box-flex: 0;
-webkit-flex: 0 0 60px;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
overflow: hidden;
margin-right: 1rem; }
.servicios h3 {
margin: 0;
font-size: 1.1rem;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.servicios h3 a {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none; }
.servicios h3 a::after {
content: "\f054";
font-family: FontAwesome;
font-size: 2rem;
margin-left: 1rem;
opacity: .5;
position: relative;
left: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease; }
.servicios h3 a:hover::after {
left: -.5rem;
opacity: 1;
color: #12AFAF; }
/*---------------------------------------------
EMPIEZAN LAS MEDIAS QUERIES
--------------------------------------------*/
@media (min-width: 768px) {
.servicios article {
margin: 1rem 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center; }
.servicios img {
-webkit-box-flex: 0;
-webkit-flex: 0 0 160px;
-ms-flex: 0 0 160px;
flex: 0 0 160px;
overflow: hidden;
margin-right: 0;
margin-bottom: 1rem;
-webkit-transition: all 1s ease;
transition: all 1s ease; }
.servicios article:hover img {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.servicios h3 a::after {
content: ""; }
.servicios h3 {
margin: 0 0 .5rem 0;
font-size: 1.5rem;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%; }
.servicios h3 a {
display: block;
width: 100%; }
.servicios p {
width: 100%; }
.servicios .btn-secondary {
margin-top: auto; }
.servicios {
background: url("../images/fondo-servicios-grande.jpg") no-repeat center center;
background-size: cover; } }