我有一个大标题,里面有一个导航栏。一旦到达标题的底部,导航栏就会自行固定在顶部,使标题与其余内容一起滚动到后面。当您再次向上滚动时,它会弹回到标题中。功能很完善。我有两个问题...
当它捕捉到屏幕顶部时,它会居中(这是我想要的),但它只有 500 像素左右宽,我希望白色背景延伸到按钮两侧之外到达 body 的边缘(宽度为 960 像素)。当我更改宽度时,它仅从右侧延伸,然后导致它与页面边缘重叠。
尽管它看起来居中,但我确信它偏离了大约 30 个奇数像素。可能是padding或者margin设置???
最奇怪的是,当我将代码放到 Web 服务器上供您测试后,导航栏并没有像我在浏览器中打开 HTML 文件时那样正确居中...所以有第三个问题?我如何阻止它这样做?
谢谢你,请帮忙:)
代码在下面,但如果你想看到它的实际效果,你可以访问这里 ( http://www.justletmeusethisnameplz.co.nf/ )。
这是相关的 HTML
<div class="header"> <!-- BEGINNING OF HEADER -->
<div id="logo"> <!-- BEGINNING OF LOGO -->
<h1 class="sliding-middle-out">Hi</h1>
</div> <!-- END OF LOGO -->
<div id="navigation"> <!-- BEGINNING OF NAVIGATION -->
<div style="float:right"> <!-- BEGINNING OF IDK -->
<div id="slider"></div>
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a>
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="content.html"><div id="three" class="item"><div class="inside">Content</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div> <!-- END OF IDK -->
</div> <!-- END OF NAVIGATION -->
</div> <!-- END OF HEADER -->
这是相关的CSS
.header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:right;
background-color:white;
padding-top:5px;
position:relative;
}
#navigation.stick{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
padding-top:5px;
position:fixed;
}
.logo{
height:100px;
width:425px;
float:left;
}
这里是相关的 JavaScript/JQuery
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./jquery-latest.js"></script>
<script>
$(document).on("scroll", function(){
if($(document).scrollTop() > 1){
$('#navigation').addClass("stick");
}else{
$('#navigation').removeClass("stick");
}
});
</script>
是的,我知道调用了许多 JQuery 库。
最佳答案
因此,您不需要为此使用 jQuery。 CSS 会处理它。
您的第一个宽度问题可以通过将 width:inherit;
添加到 #navigation.stick
来解决,这将应用父级的宽度(在本例中为标题在 960px) 到元素。
下一个问题是 Logo 将导航推了过来。没问题,添加这个 CSS:
#logo{
position:absolute;
}
这会将其从页面流中分离出来,并允许导航向左移动。
最后是居中。您需要进行一些额外的更改。
#navigation.stick{
text-align:center;
}
#navigation.stick > div{
float:none;
}
现在唯一的问题是菜单上的 slider 效果可能会被破坏,因为菜单会四处移动,但这需要更多的修复工作。
关于javascript - 我不能用 jquery 以正确的方向扩展 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33717680/