Question

首先，我是西班牙人，所以我很抱歉我的英语，这不是最好的...... 我在网页中想要在固定导航中遇到一些问题我正在开发...... 我用CSS3和jQuery制作了它... 当我向下滚动一些px时，我的导航会收到一个带有一些属性的名称类......

问题在于，当我向下滚动时，导航器不会移动;只有当我重新加载页面或甚至我打开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");
        }
    });
});

Answer 1

您可以尝试将这些样式添加到固定元素中：

-webkit-transform: translateZ(0); /*For -webkit- browsers such as Google Chrome or Safari*/
-moz-transform:translateZ(0); /* For -moz- browsers such as Firefox */
-o-transform:translateZ(0); /* For -o- browsers such as Opera */
transform:translateZ(0); /* General style for Internet Explorer */

Answer 2

当我将其加载到jsfiddle - http://jsfiddle.net/xc3t6sxu/时 - 滚动时会出现一些问题，这是由于position: fixed将其从文档流中取出而引起的正在调整页面大小并使其不再滚动到阈值以下。如果我向position: absolute添加#pagina header样式，根据http://jsfiddle.net/xc3t6sxu/1/它似乎对我有效，但您需要在section的顶部添加边距阻止它最初重叠。

Answer 3

将if语句更改为大于或等于。这可能会有所帮助：

if ($(this).scrollTop() >= position) {
    nav.addClass("fixed-nav");
} else {
    nav.removeClass("fixed-nav");
}

固定菜单。滚动时出现问题

3 个答案: