<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題檔案</title>
<style type="text/css">
.fixed-nav{
position: fixed;
width:100%;
top:-40px;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fixed-nav-appear{top:0;}
</style>
</head>
<body>
<div id="Jnav">
11111111<br />222222
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $navxf = $('#Jnav'), navTop = $navxf.offset().top, navH = $navxf.outerHeight(),winTop_1=0,winWidth=$(window).width(), holder=jQuery('<div>');
$(window).on('scroll',function(){
var winTop_2 = $(window).scrollTop();
holder.css('height',navH);
//開始浮動，不過不顯示,
if(winTop_2>navTop && winWidth>980){
holder.show().insertBefore($navxf);
$navxf.addClass('fixed-nav');
}else{
holder.hide();
$navxf.removeClass('fixed-nav');
}
//判斷滑鼠向上滾動，顯示出。
if(winTop_2>winTop_1 && winWidth>980){
$navxf.removeClass('fixed-nav-appear');
}else if(winTop_2<winTop_1){
$navxf.addClass('fixed-nav-appear');
}
winTop_1 = $(window).scrollTop();
})
</script>
</body>
</html>
目前這段代碼是滑鼠向上滾動導航條在頂部出現浮動效果。現在想添加個判斷：滾動到頁面底部導航條在頂部出現浮動。也就是和這個網站導航條一樣www.lcwlltd.com
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/183526.html
標籤：JavaScript
上一篇：element-ui table展開行，設定type="expand"，如何添加表頭？如何去掉展開圖示并設定成文字按鈕？