jquery - chrome 中固定定位的 flexslider 和粘性导航的定位问题

标签 jquery css google-chrome css-position flexslider

我有一个带有固定位置的 flexslider 的网页。我使用以下代码使 flexslider 固定位置并将 slider 添加为背景。

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

并且网页有一个粘性导航,当用户滚动到视口(viewport)高度一半的顶部高度时,该导航会变为固定位置。我通过使用以下 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 之外的所有主要浏览器中都能完美运行。

如何解决此问题以及是否有其他方法来设计粘性导航?

最佳答案

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

 -webkit-backface-visibility: hidden 

flexslider.css。

您可以访问这里 https://github.com/woothemes/FlexSlider/issues/179 找到答案

关于jquery - chrome 中固定定位的 flexslider 和粘性导航的定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16768540/

相关文章:

CSS3 : z-index not working in iPad Safari

javascript - 在 Chrome 中解析 SVG 路径日志消息时出错

javascript - 连接包含多个空格的数组可以消除 Chrome 中的重复空格

javascript - 我可以多次使用 jquery 的 .done() 吗?

javascript - 使用 jQuery/Ajax 从数据库中检索记录

php - 通过电子邮件发送在 HTML5 canvas 上创建的图像

css - 有没有办法获得后备图像而不是显示动画 GIF 的第一帧?

javascript - 尝试将字符串作为函数参数传递给 SVG

php - 文本区域在写入某些行文本后不上传文本

google-chrome - 在 Chrome 开发控制台中仅显示错误