【问题标题】:$(window).width(); not work at correct position$(窗口).width();不能在正确的位置工作
【发布时间】:2017-03-18 20:43:16
【问题描述】:

这是我的代码:

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

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

【问题讨论】:

  • 先尝试添加您需要的相关属性的打印输出。

标签: jquery html twitter-bootstrap function width


【解决方案1】:

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

【讨论】:

  • 阅读this SO answer 了解document.clientWidth 返回的内容和时间。
  • 此外,他们正在尝试匹配 CSS 中的媒体查询。如果当前浏览器以桌面模式(带有实心侧边栏)呈现页面,则您的代码只会在没有滚动条的页面上按照 OP 的预期工作,并且在存在滚动条时会出现异常行为。
  • @AndreiGheorghiu document.clientWidth 返回 undefined 因为它不存在。我谈到了document.documentElement.clientWidth。无论如何,我并没有说这对每个人来说都是最完美的解决方案,但值得一试。在我的用例中,它在 IE11、EDGE、FF、Chrome 和 Brave 中绝对完美……无论有没有可见的滚动条。所以我没有理由不尝试。
  • 我的意思是document.documentElement.clientWidth。如果您阅读了我链接的答案(和问题),您会知道我们指的是同一个属性,但这是一个非常好的观察结果。在 JavaScript 中应该是准确的。但除此之外,请注意您是这里唯一知道并参考您的用例的人。其他人都提到了 OP 用例,因为这就是这个问题的意义所在。
猜你喜欢
  • 2011-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多