RWD風行,所以網站的前端要考慮的層面就多了很多,前端目前缺乏所以得自己來,浮動式固定選單挺常用到,備忘囉!!
CSS
<style>
.navFixed {
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin-top: 0;
min-width: 100%;
opacity: 0.94;
transition: opacity .5s ease-out;
}
</style>
JS
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 495) { /* 要滑動到選單的距離 */
$('.dropdowns').addClass('navFixed'); /* 幫選單加上固定效果 */
} else {
$('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
}
});
});
</script>
HTML
<div class="navFixed" ></div>
參考來源: https://edwardzou.blogspot.com/2017/09/fixMenu.html
沒有留言:
張貼留言