Javascript 滚动闪烁_Javascript_Jquery_Html_Css_Flicker

Javascript 滚动闪烁

javascript jquery html css

Javascript 滚动闪烁,javascript,jquery,html,css,flicker,Javascript,Jquery,Html,Css,Flicker,当使用Javascript从绝对值更改为固定值时，我有一个关于闪烁的问题。我无法在Mozilla Firefox中重现这个问题，然而，Internet Explorer和Google Chrome都有这个问题。我似乎无法修复它 HTML: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">

当使用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>

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);
}

$( 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" );
    }
}

Javascript/jQuery:

<!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>

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);
}

$( 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小时内可能会是这样。

我没有注意到任何闪烁，可能只是我：/你在使用什么浏览器？Chrome版本35.0.1916.153 m，Windows 7 64位。闪烁到底发生在哪里？奇怪。我正在使用相同的设置，菜单栏上有一个闪烁。只有当你从顶部向下滚动时才会发生这种情况。可能是你的硬件或是速度慢/过载的系统？老实说，我不是很确定。。。