向下滚动

Question

当用户使用不同的背景颜色向下滚动时，我想让导航栏全宽。

有关如何解决此问题的任何建议吗？

截图：

http://puu.sh/j6amm/64b4ac08c0.png - 全角导航栏。

http://puu.sh/j6aoM/f77868543c.png - 当页面向下滚动时，导航栏将被裁剪为容器大小。

＆＃13;

＆＃13;

$(window).scroll(function(){
          var sticky = $('.top'),
              scroll = $(window).scrollTop();

          if (scroll >= 100) sticky.addClass('fixed');
          else sticky.removeClass('fixed');
        });

＆＃13;

.full-width{
background-color: #A7C520;
}

.container .top{
width: 1170px;
z-index: 100;
display: inline-block;
}

.fixed{
position: fixed;
display: block !important;
background-color: #e8556c;
}

.logo{
display: inline-block;
width: 30%;
float: left;
height: 50px;
}

.logo h1{
margin: 0;
padding: 0;
line-height: 50px;
font-size: 24px;
text-align: left;
color: #fff;
}

.nav{
float: right;
width: 70%;
display: inline-block;
line-height: 50px;
}

.nav ul{
text-align: right;
padding: 0;
margin: 0;
list-style-type: none;
height: 50px;
}

.nav ul li{
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
color: #fff;
}

＆＃13;

<div class="full-width">

        <div class="container">

            <div class="top">

                <div class="logo">
                    <h1>Logo Title</h1>
                </div>

                <div class="nav">
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </div>

            </div>

        </div>

</div>

＆＃13;

＆＃13;

＆＃13;