Question

使用Javascript从绝对更改为固定时，我有一个关于闪烁的问题。我无法在Mozilla Firefox中重现该问题，但是，Internet Explorer和Google Chrome都有问题。我似乎无法解决它。

HTML：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">

    <script src="plugins/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
    <script src="plugins/jqueryUI.js"></script>
    <script src="plugins/transit.js"></script>
    <script src="scripts/centering.js"></script>
    <script src="scripts/script.js"></script>
    <title>Interdomein</title>
</head>

    <div id="mainMenu">     
        <div class="button" style="margin-left: 88px;"> Home        </div> 
        <div class="button">                                Webhosting  </div>
        <div class="button">                                Domeinen    </div>
        <div class="button">                                Support     </div>
        <div class="button">                                Contact     </div>
        <div class="button">                                Inloggen    </div>
    </div>

<body>  

    <div id="header">

    </div>
</body>
</html>

CSS：

html    {
    width: 100%;
    height: 2000px;
    background-color: white;
    margin: 0;
}

body    {
    background-color: black;
    width: 960px;
    height: 100%;
    margin: 0;
    padding-top: 30px;
}

#header {
    width: 900px;
    height: 300px;
}

#mainMenu   {
    width: 900px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    position: absolute;
    top: 30px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);
}

.button {
    width: 100px;
    height: 50px;
    float: left;
    line-height: 50px;
    text-align: center;
    margin-left: 20px;
    border-left: black 1px solid;
    border-right: black 1px solid;
    background-color: rgba(255,255,255,0.3);
}

的Javascript / jQuery的：

$( document ).ready(function()  {

    $(window).scroll(fixMenu);
    fixMenu();

});

function fixMenu() {
    if ($(window).scrollTop() > 0) {
        $( "#mainMenu" )      .css( "position", "fixed" );
        $( "#mainMenu" )      .stop(1,0).transition({ width: 50 },1000);     
        $( ".button" )        .hide();
    }
    else    {
        $( "#mainMenu" )      .stop(1,0).transition({ width: 900 },250);
        setTimeout(function(){  $( ".button" ).show()  },250);
        $( "#mainMenu" )      .css( "position", "absolute" );
    }
}

有关工作示例，请参阅“interdomein.site11.com”。这个地址会随着时间的推移而改变，但在接下来的24小时内它可能会是这样的。

滚动闪烁

0 个答案: