javascript - 无法在 Windows 调整大小事件上切换属性和类

Question

我在 div 容器的特定宽度上向 div 添加一个位置属性，并在该 div 容器的另一个宽度上删除相同的属性，它正在工作但它不会切换，我的意思是它坚持已应用的内容首先，课堂上发生了类似的问题，我错过了什么吗？我想切换，这意味着当宽度大于711px时应该添加样式和类，当宽度小于711px时应该删除它们，以下是我的代码：

Javascript：

$(function () {
$(window).resize(function () {
    var windowSize = $('#mainContainer').width();

    if (windowSize > 711) {
        $('#navBar').attr('style', 'position: fixed');
        $('#mainContent').addClass('offset2');

    }
    if (windowSize < 711) {
        $('#navBar').removeAttribute('style');
        $('#mainContent').removeClass('offset2');
    }
});

});

HTML：

<div class="container-fluid">
        <div class="row-fluid" id="mainContainer">
            <div class="span2" id="navBar" >
                <nav>
                    <ul class="nav nav-tabs nav-stacked ">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Spotlight</a></li>
                        <li><a href="#">Movies</a></li>
                        <li><a href="#">Tv Shows</a></li>
                        <li><a href="#">Show Case</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Subscribed</a></li>
                    </ul>
                </nav>
            </div>
            <div class="span10" id="mainContent">
       <p>
          Enter a long paragrah of dummy text here, in order to see if the sidebar is scrolling along!

       </p>
    </div>

</div>

Answer 1

.css('position','fixed')不使用.attr('style', 'position: fixed')。尝试：

$(window).resize(function () {
    var windowSize = $('#mainContainer').width();
    if (windowSize > 711) {
        $('#navBar').css('position','fixed');
        $('#mainContent').addClass('offset2');

    }
    if (windowSize < 711) {
        $('#navBar').css('position','relative');
        $('#mainContent').removeClass('offset2');
    }
});