固定菜单。滚动时的问题答案

【问题标题】：Fixed menu. Problems when scrolling固定菜单。滚动时的问题
【发布时间】：2014-12-18 20:38:33
【问题描述】：

首先，我是西班牙人，所以对不起我的英语，这不是最好的...... 我在我正在开发的网页中想在固定导航中遇到一些问题...... 我已经用 CSS3 和 jQuery 做到了... 当我向下滚动一些像素时，我的导航会收到一个带有一些属性的名称类...

问题是当我向下滚动时，导航没有移动；仅当我重新加载页面甚至打开 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。这更容易提供帮助。

标签： javascript jquery html css

【解决方案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 */

【讨论】：

没问题，很高兴能帮到你^^
我不明白的是......为什么你必须把那个属性？在 Firefox 和 safari 中，没有它也可以工作
关于转换的信息并不多：translateZ 以及为什么它解决了这个问题，但我的猜测是 Firefox 和 Safari 正确处理固定位置，而 Chrome 没有，转换通常用于转换事物，但我猜 translateZ 会强制 Chrome 从顶部重新定位具有给定边距的元素，应用 -webkit-transform: translateZ(0);在带有文本的菜单上使文本的填充为 0，应用 100 而不是 0 会修复文本但会破坏固定位置

【解决方案2】：

当我将它加载到 jsfiddle 时 - http://jsfiddle.net/xc3t6sxu/ - 当你滚动时它会跳来跳去，这是因为 position: fixed 将它从文档流中取出，它正在调整页面大小并使其不再滚动到阈值以下。如果我将position: absolute 样式添加到#pagina header，按照http://jsfiddle.net/xc3t6sxu/1/，它似乎对我有用，尽管您需要在section 的顶部添加一个边距以阻止它最初重叠。

【讨论】：

【解决方案3】：

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

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

【讨论】：