13071077710
您的当前位置: 首页 > 前端开发 > html/css > 滚动条向上滚动导航固定在顶部

滚动条向上滚动导航固定在顶部

时间: 2017-11-9

演示

js

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>$(document).ready(function() { (function($) {
var ost = 0;
$(window).scroll(function() {
var cOst = $(this).scrollTop();
if (cOst > 100 && cOst > ost) {
$('#hd').addClass('fixed').removeClass('default');
} else {
$('#hd').addClass('default').removeClass('fixed');
}
ost = cOst;
});
})(jQuery);
})</script>

css

*{ margin: 0; padding: 0; }
ul,li{ list-style: none; }
a{ text-decoration: none; color: #555; }
#hd {    height: 90px;    line-height: 90px;    background: #ccc;    box-shadow: 0px 2px 2px rgba(0, 0, 0, .3);    position: fixed;    width: 100%;    left: 0;    top: 0;    z-index: 9999;    -o-transition: .3s;    -ms-transition: .3s;    -moz-transition: .3s;    -webkit-transition: .3s;    transition: .3s; }
#hd ul{ width: 1170px; margin: 0 auto; }
#hd ul li{ float: left; margin-right: 20px; }
.fixed {    top: -101px !important; }

html

<div id="hd">
  <ul>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
    <li>网站导航</li>
  </ul>
</div>

Copyright © 2013-2019 子歇    版权所有   网站地图