Question

我有一个固定定位的flexslider的网页。我使用下面的代码来制作flexslider固定位置并添加滑块作为背景。

.flexslider {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    z-index: -1;
    border: none;
 }

并且网页具有粘性导航，当用户滚动到视口高度的一半的顶部高度时，该导航变得固定。我通过使用以下jQuery和CSS来做到这一点：

jQuery的：

   $(window).scroll(function() {
    var scrollTop = $(window).height()/2;
    if ($(window).scrollTop() >= scrollTop) {
        $('.main-header').removeClass('main-header ').addClass('fixed-header');

    }
    if ($(window).scrollTop() < scrollTop) {
        $('.fixed-header').removeClass('fixed-header').addClass('main-header ');
    }
})

CSS：

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
}

我的html标记是：

   <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/image1.jpg" />
            </li>
            <li>
                <img src="images/image2.jpg" />
            </li>
            <li>
                <img src="images/image3.jpg" />
            </li>
        </ul>
    </div>


   <header class="main-header">
                        <h1>heading</h1>
                        <p>
                            paragraph
                        </p>
                        <nav class="site-navigation">
                            <ul>
                                <li>
                                    <a class="active" href="#slide1">home</a>
                                </li>
                                <li>
                                    <a href="#slide2">about</a>
                                </li>
                                <li>
                                    <a href="#slide3">services</a>
                                </li>
                                <li>
                                    <a href="#slide4">contact</a>
                                </li>
                                <li>
                                    <a href="#slide5">elements</a>
                                </li>
                            </ul>
                        </nav>
                    </header>

问题是导航没有固定，当它在chrome中滚动时它会上升。如果我改变flexslider的固定位置，它工作正常。此代码适用于除Chrome以外的所有主流浏览器。

如何解决此问题，还有另一种设计粘性导航的方法吗？

Answer 1

我为我的问题找到了解决方案。如果有人遇到与我相同的问题，您可以通过删除样式规则来解决此问题

 -webkit-backface-visibility: hidden

of flexslider.css。

您可以访问https://github.com/woothemes/FlexSlider/issues/179

找到答案

使用固定定位的柔性滑板和粘性导航在chrome中定位问题

1 个答案: