gpt4 book ai didi

启用 JavaScript 的滚动修复了导航栏问题

转载 作者:太空宇宙 更新时间:2023-11-03 18:20:13 24 4
gpt4 key购买 nike

我有一个启用了 JavaScript 的滚动导航栏。它从英雄图形下方开始,然后在到达顶部时粘在顶部。它工作得很好,但是,当它到达顶部时,它会导致它下面的 div 捕捉到顶部而不是顺利到达那里。很难解释,所以这是代码。

我知道发生了什么:一旦导航栏到达顶部,它就会堆叠在 div 上方,导致 div“跳跃”。我只是不知道如何让它更顺畅。

这是代码,感谢您的想法!

<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>

<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<a href= "/Technology/index.html"><li class="links">Technology</li></a>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>


<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>

body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}

p {
line-height: 1.5;
}

img {
max-width: 100%;
height: auto;
}

.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}

h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}

.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}

.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}

.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}

.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}

<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;

win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>

最佳答案

当一个 div 固定后,它将不再占用“空间”,这意味着下一个 div 将完全按照您的描述进行操作——靠近顶部堆叠。

考虑使用 div 将所有内容包装在页眉之后:

<div class="header">
...
</div>

<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>

当我们固定header时,我们可以在主体div中添加等于header高度的top-padding,以防止它跳动。

var win      = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;

win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});

JSFiddle here

希望这对您有所帮助!

关于启用 JavaScript 的滚动修复了导航栏问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21976728/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com