JavaScript或者jQuery的代码怎么实现网页向下滚动之后顶部导航栏变窄
HTML的结构时这样的<header><divclass="login"></div><divclass="nav"></div></header>CSS代码时这样的，固...
HTML的结构时这样的<header> <div class="login"></div> <div class="nav"> </div></header> CSS代码时这样的，固定定位，但是把上面的login部分也固定了，单独固定nav可以，但是滚动条下拉之后上面有白条，不会变窄，我想滚动条下拉之后login就消失了，拉回去之后又出来header { position: fixed; left: 0;/*左右为0之后才能居中*/ right: 0; }就像华为的网站的顶部导航栏那样，怎么用JavaScript的代码或者jQuery的代码实现，刚学html和css，还没学JavaScript和jQuery，请教大家一下
展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {height:100%}
body {background:linear-gradient(red, blue)}
header {position:fixed; top:0; left:0; right:0}
header .login {height:28px; background-color:#fff; text-align:right}
header .nav {height:40px; background-color:#ddd; text-align:center}
.test {height:2000px}
</style>
</head>
<body>
<header><div class="login">这是login部分</div><div class="nav">这是nav部分</div></header>
<div class="test"></div>
<script>
window.onscroll=function(){
var login=document.getElementsByClassName("login")[0];
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop<10){
login.style.display="block";
}else{
login.style.display="none";
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html 代码
<div class="header" >
<h3>登陆 注册</h3>
<h2>这是顶部导航 只是模拟华为的</h2>
</div>
<div class="content">
模拟内容
</div>
css 代码
*{padding: 0;margin: 0;}
.header{
width:100%;
position:fixed;
top:0;
left:0;
background: #fff;
z-index:6;
}
h3,h2{
width: 1180px;
margin: 0 auto;
line-height: 60px;
height: 60px;
}
h3{
height: 40px;
line-height: 40px;
text-align: right;
}
.header.active h3{
display: none;
}
.content{
width: 100%;
height: 1200px;
background: #ccc;
text-align: center;
line-height: 400px;
font-size: 60px;
}
javascript代码
// 用原生js的写法 需要引入jq
// 这里推荐 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js
window.onload=function(){
var flag=true;
window.onscroll=function(e){
var num=getScrollOffset().y;
var header=document.getElementsByTagName('h3')[0];
if(num>2){
if(flag){
flag=false;
header.style.display="none"
}
}else{
if(!flag){
flag=true;
header.style.display="block"
}
}
}
}
/**
* 获取窗口滚动条的位置
*/
function getScrollOffset(){
// 除IE8及更早版本
if( window.pageXOffset != null ){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}
// 标准模式下的IE
if( document.compatMode == "css1Compat" ){
return {
x : document.documentElement.scrollLeft,
y : document.documentElement.scrollTop
}
}
// 怪异模式下的浏览器
return {
x : document.body.scrollLeft,
y : document.body.scrollTop
}
}
//用jq的写法
$(function(){
return;
var flag=true;
$(window).on("scroll",function(e){
var num =$(this).scrollTop();
if(num>2){
if(flag){
flag=false;
$(".header").addClass("active")
}
}else{
if(!flag){
flag=true;
$(".header").removeClass("active")
}
}
})
})
// 两种思想大同小异。一种是通过js直接操作元素。一种是通过js控制类名。而通过类名控制元素
// 希望采纳
<div class="header" >
<h3>登陆 注册</h3>
<h2>这是顶部导航 只是模拟华为的</h2>
</div>
<div class="content">
模拟内容
</div>
css 代码
*{padding: 0;margin: 0;}
.header{
width:100%;
position:fixed;
top:0;
left:0;
background: #fff;
z-index:6;
}
h3,h2{
width: 1180px;
margin: 0 auto;
line-height: 60px;
height: 60px;
}
h3{
height: 40px;
line-height: 40px;
text-align: right;
}
.header.active h3{
display: none;
}
.content{
width: 100%;
height: 1200px;
background: #ccc;
text-align: center;
line-height: 400px;
font-size: 60px;
}
javascript代码
// 用原生js的写法 需要引入jq
// 这里推荐 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js
window.onload=function(){
var flag=true;
window.onscroll=function(e){
var num=getScrollOffset().y;
var header=document.getElementsByTagName('h3')[0];
if(num>2){
if(flag){
flag=false;
header.style.display="none"
}
}else{
if(!flag){
flag=true;
header.style.display="block"
}
}
}
}
/**
* 获取窗口滚动条的位置
*/
function getScrollOffset(){
// 除IE8及更早版本
if( window.pageXOffset != null ){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}
// 标准模式下的IE
if( document.compatMode == "css1Compat" ){
return {
x : document.documentElement.scrollLeft,
y : document.documentElement.scrollTop
}
}
// 怪异模式下的浏览器
return {
x : document.body.scrollLeft,
y : document.body.scrollTop
}
}
//用jq的写法
$(function(){
return;
var flag=true;
$(window).on("scroll",function(e){
var num =$(this).scrollTop();
if(num>2){
if(flag){
flag=false;
$(".header").addClass("active")
}
}else{
if(!flag){
flag=true;
$(".header").removeClass("active")
}
}
})
})
// 两种思想大同小异。一种是通过js直接操作元素。一种是通过js控制类名。而通过类名控制元素
// 希望采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
向下滚动后给login隐藏，给header加个fixed
追问
header整体已经fixed了，现在的问题就是向下滚动login还在，现在就是需要向下滚动login隐藏，滚动到顶部后login又显示，可是又没有学过JavaScript或者jQuery，不会弄啊，您能写一个JavaScript或者jQuery的代码给我借用下嘛
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
