Question

我在目前正在开发的网站上遇到此粘性标题的问题。我使用jquery在滚动上进行了粘性更改，这是代码。

jQuery(document).ready(function(){       
    var scroll_pos = 0;
    jQuery(document).scroll(function() { 
        if(jQuery(window).width()>990){ 
            scroll_pos = jQuery(this).scrollTop();
            if(scroll_pos > 10){ 
            if(!jQuery('#header_super_wrapper').hasClass('fixed_header')){
                jQuery('#header_super_wrapper').addClass('fixed_header');
            }
            if(jQuery("#logo > a > img").hasClass("standard")){
                jQuery("#logo > a > img").attr("src","/wp-content/uploads/2013/10/scrollNavLogoSmall.png");
            }
        } else {
            if(jQuery('#header_super_wrapper').hasClass('fixed_header')){
                jQuery('#header_super_wrapper').removeClass('fixed_header');
            }
            if(jQuery("#logo > a > img").hasClass("standard")){
                jQuery("#logo > a > img").attr("src","/wp-content/uploads/2013/10/logo_1_small.png");
            }
        }
    });
});

这是css

.fixed_header{
    background-color: white;
    -webkit-box-shadow: 0px 0px 3px #aaaaaa;
    -moz-box-shadow: 0px 0px 3px #aaaaaa;
    box-shadow: 0px 0px 3px #aaaaaa;
    -webkit-transform: rotate(0deg);
    width: 100%;
    position: fixed;
    left: 0px;
    top:0px;
    display: block;
}

.fixed_header nav .menu > li.menu-item > a{
    color:#25aae1;
}

在Mozilla和Firefox上一切正常，但是当我在webkit（Chrome - Safari）上时，我发现了很多故障。该网站的测试网址是 http://www.innovativedentallabs.com.php53-7.dfw1-2.websitetestlink.com/

有人劝说将-webkit-transform：rotate（0deg）添加到代码中，但这不起作用。

我计划清理并将这些更改添加到css类中，但首先我需要解决此问题。

非常感谢专家的帮助。

原谅我糟糕的英语

Answer 1

我刚刚找到一个解决方法，可能不是最好的方法，但它有效。

我没有使用固定定位，而是在滚动时使用jQuery计算元素的最高值。

jQuery(window).scroll(function() {
    scroll_pos = jQuery(this).scrollTop();
    if(scroll_pos > 10) {                       
        jQuery('#header_super_wrapper').css('top', scroll_pos);
    } else {
        jQuery('#header_super_wrapper').css('top', 0);
    }
});

这就是它。

我希望有人能为这个问题找到一个css解决方案。

在滚动时更改背景时，使用css和webkit会出现故障

1 个答案: