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

Question

我在 div 容器的特定宽度上向 div 添加位置属性，并在该 div 容器的另一个宽度上删除相同的属性，它正在工作但它不会切换，我的意思是它坚持什么已首先应用，类(class)正在发生类似问题，我错过了什么吗？我想切换，这意味着当宽度大于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');
    }
});