Question

我在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');
    }
});

无法在Windows resize事件上切换属性和类

1 个答案: