php隐藏顶部导航,jquery操作导航条隐藏与显示2019年1月23日 14:08

实例

html>

Document

*{margin:0px;padding:0px;}

.header{width:100%;height:30px;background:rgba(160,2,163,0.1);position: fixed;}

.container{text-align:center;position:relative;width:800px;margin:0px auto;height:30px;line-height: 25px;}

input{height:20px;width:300px;position:relative}

button{height:20px;position: absolute;top:4px;margin-left:5px;}

.box{

width:800px;height:600px;border:1px solid red;margin:0px auto;

}

.box2{

width:800px;height:1200px;border:1px solid red;margin:0px auto;

}

.blank{height:30px;width:100%;}

.top{width:30px;height:80px;position:fixed;bottom:0px;right:0px;}

搜索

顶部

$(function () {

$(window).scroll(function () {

if ($(window).scrollTop() > 50) {

$('.header').css('display', 'none')

} else {

$('.header').css({ 'display': 'block', 'background': 'rgba(160,2,163,0.1)' })

}

if ($(window).scrollTop() > 600) {

$('.header').css({ 'display': 'block', 'background': 'rgba(160,2,163,0.5)' })

}

if ($(window).scrollTop() > 800) {

$('.top').css('display', 'block')

} else {

$('.top').css('display', 'none')

}

})

})

运行实例 »

点击 "运行实例" 按钮查看在线实例