jQ--搜尋框在頁面滾動一定距離時顯示並固定在頁面頂部
阿新 • • 發佈：2019-02-02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin:0;padding:0;list-style: none;}
/*滾動搜尋框*/
.scroll-bar{
display: none;
position: fixed;
width: 100%;
z-index: 10000;
height: 50px;
background: #ff0036;
}
.con{width:800px;height: 2000px;border: 1px solid red;margin:0 auto}
</style>
</head>
<body>
<div class="scroll-bar"></div>
<div class="con">
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
</div>
<script>
$(function(){
const win=$(window);//得到視窗物件
const selector = $(".scroll-bar");//獲取導航物件
var height = 1000;//設定距離頂部偏移量
win.scroll(function(){
if(win.scrollTop()>= height){
selector.slideDown(800).css('display','block');
}else{
selector.slideUp(800);
}
})
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin:0;padding:0;list-style: none;}
/*滾動搜尋框*/
.scroll-bar{
display: none;
position: fixed;
width: 100%;
z-index: 10000;
height: 50px;
background: #ff0036;
}
.con{width:800px;height: 2000px;border: 1px solid red;margin:0 auto}
</style>
</head>
<body>
<div class="scroll-bar"></div>
<div class="con">
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
<p>sbgdnnnnnd</p>
</div>
<script>
$(function(){
const win=$(window);//得到視窗物件
const selector = $(".scroll-bar");//獲取導航物件
var height = 1000;//設定距離頂部偏移量
win.scroll(function(){
if(win.scrollTop()>= height){
selector.slideDown(800).css('display','block');
}else{
selector.slideUp(800);
}
})
})
</script>
</body>
</html>