$(window).width();没有在正确的位置工作

Question

那是我的代码：

$(window).on("load scroll resize", function() 
{
    if( $( window ).width() >= 767)
    { 
        $( ".boxlogo" ).css("display","block");
        $( ".nav > li").css("margin-top","95px");`

        var s = $(window).scrollTop();
        if(s  > 1)
        {
            $( ".boxlogo" ).css("width","140px");
            $( ".navbar-color" ).css("background-color","#fff");
            $( ".dropdown-menu > li > a") .css("color","#000");
            $( ".dropdown > a ").css("color","#000");
            $( ".nav > li > a").css("color","#000");                    
            $( ".dropdown-menu > li > a") .css("text-shadow","2px 2px #fff");
            $( ".dropdown > a ").css("text-shadow","1px 1px #fff");
            $( ".nav > li > a").css("text-shadow","1px 1px #fff");
            $( ".nav > li").css("margin-top","62px");
            $( ".dropdown-menu").css("background-color","#fff");
        }
        else 
        {
            $( ".boxlogo" ).css("width","200px");
            $( ".navbar-color" ).css("background-color","transparent");                
            $( ".dropdown-menu > li > a") .css("color","#fff");
            $( ".dropdown > a ").css("color","#fff");
            $( ".nav > li > a").css("color","#fff");
            $( ".dropdown-menu > li > a") .css("text-shadow","1px 1px #000");
            $( ".dropdown > a ").css("text-shadow","1px 1px #000");
            $( ".nav > li > a").css("text-shadow","1px 1px #000");
            $( ".dropdown-menu").css("background-color","transparent");
            $( ".nav > li").css("margin-top","96px");
        }
    }//if windows
    else {
        $( ".boxlogo" ).css("display","none");
        $( ".nav > li").css("margin-top","5px");
    }
});//scroll resize*/`

问题是：

$( ".boxlogo" ).css("display","block");
$( ".nav > li").css("margin-top","95px");

当 windows 宽度为 767px 但在 784px 时不起作用...为什么？那更重要，因为这是菜单更改样式的关键。我尝试使用 if( $( window ).innerWidth() >= 767) 但问题仍然存在。我也尝试使用 css @media 来做到这一点，但根本不起作用。我正在使用 bootstrap.

Answer 1

您可以尝试属性 document.documentElement.clientWidth 而不是使用 $(window).width() 或类似的东西，其中 returns 文档宽度（没有滚动条）。据我所知，至少这在类似情况下和跨浏览器对我有用。

$(window).width();没有在正确的位置工作

$(window).width(); not work at correct position

html

jquery

function

width

twitter-bootstrap