回滚到旧风格

Question

滚动200px时，我的导航栏将重新排列，但是当滚动回顶部时，它不会改变。我想滚动到顶部时，我的导航栏更改为古戏台：

$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > 300) { 
 
    $('.nav').css({"position": "fixed", "top": "0","background-color":"#252525","margin":"0","width":"100%", \t \t \t \t    "padding":"10px 0 10px 0"});; 
 
    } 
 
});

.nav { 
 
    margin:10px 10px 10px 10px; 
 
    font-size:120%; 
 
    text-align:center; 
 
    padding-bottom:20px; 
 
    position:static; 
 
} 
 
.nav > li { 
 
    display:inline-block; 
 
    list-style:none; 
 
    margin-right:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <img src="images/button.png" class="nav-btn"> 
 
    <ul class="nav" id=""> 
 
    <li><a href="file:///C:/xampp/htdocs/GEM/index.html" >HOME</a></li> 
 
    <li ><a href="#" >TUTORIALS</a></li> 
 
    <li><a href="#">ARTICLES</a></li> 
 
    <li><a href="#">ABOUT US</a></li> 
 
    </ul>     
 
</nav>

Answer 1

尝试这样的事情，我添加了一个类.fixed并添加属性到这个类，然后我使用jQuery addClass()方法，这将很好地工作与片段

$(document).scroll(function() { 
 
\t var y = $(this).scrollTop(); 
 
\t if (y > 300) { 
 
\t \t $('.nav').addClass('fixed'); 
 
\t } 
 
\t else { 
 
\t \t $('.nav').removeClass('fixed'); 
 
\t } 
 
});

body { 
 
    height: 1000px; /* showing scroll */ 
 
} 
 
nav { 
 
    margin: 10px 10px 10px 10px; 
 
    font-size: 120%; 
 
    text-align: center; 
 
    padding-bottom: 20px; 
 
    position: static; 
 
} 
 
.nav > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin-right: 10px; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    background-color:#252525; 
 
    margin:0; 
 
    width:100%; 
 
    padding:10px 0 10px 0; 
 
}

<nav> <img src="images/button.png" class="nav-btn"> 
 
    <ul class="nav" id=""> 
 
    <li><a href="file:///C:/xampp/htdocs/GEM/index.html" >HOME</a></li> 
 
    <li ><a href="#" >TUTORIALS</a></li> 
 
    <li><a href="#">ARTICLES</a></li> 
 
    <li><a href="#">ABOUT US</a></li> 
 
    </ul> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

尝试