1
Прежде всего, я испанский, поэтому я прошу прощения за свой английский, это не самое лучшее ... У меня проблемы с фиксированной навигацией, которую я хотел сделать на веб-странице I «м развивается ... Я сделал это с помощью CSS3 и JQuery ... когда я прокрутите вниз несколько точек, мой нав получает имя класса с некоторыми атрибутами ...Исправлено меню. Проблемы при прокрутке
проблема заключается в том, что, когда я прокручиваю вниз, nav не движется; только тогда, когда я перезагрузить страницу или даже при открытии меню F12 ... Так что, если вы можете помочь мне, я был бы так рад ... Это код:
/* HTML5 */
<body>
<div id="wrapper">
<div id="principal">
<header>
<p>tapeHD</p>
<hr/>
<span>Enero 17, 2015</span>
</header>
<section>
<video autoplay loop muted volume="0" id="video_index">
<source src="videos/index.webm" type="video/webm" />
<source src="videos/index.mp4" type="video/mp4" />
<source src="videos/index.ogv" type="video/ogv" />
</video>
<div id="comenzar">
<h2 class="primero">Comparte videos con más</h2>
<h2 class="segundo">de un <span>millón</span> de personas</h2>
<input type="submit" value="Comenzar ahora" id="boton_comenzar" />
</div>
</section>
</div>
<div id="pagina">
<header id="cabecera">
<div id="cabecera_menu">
<div id="apartado_logo"><div id="tapeHD"><a href="#"><p>tapeHD</p></a></div></div>
<div id="busqueda"><input type="search" id="buscar" placeholder="Buscar" value="" /></div>
<!-- Este div se hace visible una vez el usuario está logeado... -->
<div id="usuario">
<input type="submit" id="iniciar" value="Iniciar sesión" />
<div id="imagen_perfil">
<div id="esfera"><img src="images/user.jpg" /></div>
</div>
</div>
</div>
<div id="menu_usuario">
<a id="boton_menu" class=""><span></span></a>
<nav id="opciones">
<li id="perfil" class=""><a></a></li>
<li id="ajustes" class=""><a></a></li>
<input type="submit" id="desconectar" class="" value="" />
</nav>
</div>
</header>
<section>
<div id="contenido"></div>
<div id="menu">
<div id="info">
<nav>
<ul>Etiquetas
<li><a href="#">Animales</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Comedia</a></li>
<li><a href="#">Juegos</a></li>
<li><a href="#">Terror</a></li>
</ul>
<ul>Sobre nosotros
<li><a href="#">Quiénes somos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
<div id="social">
<nav>
<li class="facebook"><a target="_blank" href="https://www.facebook.com/">
<img src="images/social/facebook.png" /></a></li>
<li class="twitter"><a target="_blank" href="https://twitter.com/">
<img src="images/social/twitter.png" /></a></li>
<li class="google"><a target="_blank" href="https://plus.google.com/">
<img src="images/social/google.png" /></a></li>
<li class="pinterest"><a target="_blank" href="https://es.pinterest.com/">
<img src="images/social/pinterest.png" /></a></li>
</nav>
</div>
</div>
</section>
<footer>
<div id="banner">
<h2>¿Tienes más dudas?</h2>
<p>Póngase en contacto con nuestro personal técnico</p>
<div id="personal">
<div class="coder"><img src="images/Antonio.jpg" /></div>
<div class="coder"><img src="images/Antonio.jpg" /></div>
<div class="coder"><img src="images/Antonio.jpg" /></div>
</div>
</div>
<div id="copyright">
<p><span>Copyright© 2015:</span> Todos los derechos reservados</p>
</div>
</footer>
</div>
</div>
</body>
/* CSS3 */
#pagina header {
background-color: #111;
height: 161px;
width: 100%;
}
#pagina header.fixed-nav {
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
/* JQuery */
jQuery("document").ready(function($){
var nav = $("#cabecera");
var position = nav.offset().top;
$(window).scroll(function() {
if($(this).scrollTop() > position) {
nav.addClass("fixed-nav");
} else {
nav.removeClass("fixed-nav");
}
});
});
Сделать jsfiddle проблемы. Это проще. – Refilon