gpt4 book ai didi

jquery - 粘性 Bootstrap 导航栏不工作

转载 作者:行者123 更新时间:2023-11-28 15:44:42 30 4
gpt4 key购买 nike

我有一个用于我正在处理的小测试站点的导航栏,我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方,直到您滚动到它通常会离开屏幕的位置。当它开始离开屏幕时,我希望它留在屏幕顶部,但在必要时返回。我在 JQuery 文件中尝试了不同的代码,例如:

$('.navbar-default').affix({
offset: {
top: 50
}
});

如果有人能够提供帮助,我们将不胜感激。

下面是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>

<title>Hope's Seed</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JS/style.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

</head>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</nav>

<div class="bg">
<div class="container-fluid">
<div class="row">
<img class="img-responsive" src="Images/plantgrow.jpg">
<div>
</div>
</div>

</body>
</html>

我的 CSS 代码(可能有一些冗余,我还没有回去清理它):

.header .jumbotron {
color:#fff;
background-color:#a1ff7c;
font-family:Roboto Condensed;
margin-bottom:0px;
}

.navbar-default {
background-color: #78c45a;
border: 0px;
font-family:Roboto Condensed;
margin-bottom:0px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #78c45a;
}

.navbar-default .navbar-nav > .active > a:hover{
background-color: #5a9344;
color: #fff;
}

.navbar-default .navbar-nav > li > a {
color: #fff;
}

.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}

.navbar-default .navbar-brand {
color: #fff;
}

.navbar-default .navbar-brand:hover {
background-color:#5a9344;
color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}

.navbar-default .navbar-toggle {
border: 0px;
}

.navbar-default .navbar-toggle:hover {
background-color:#5a9344;;
}

p {
font-family: Roboto Condensed;
}

.bg .img-responsive {
width:100%;
height:auto;
}

.jumbotron {
padding-top:1%;
padding-bottom:1%;
}

.jumbotron h1 {
margin-top:0px;
}

.jumbotron p {
margin-bottom:0px;
}

.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}

.container-fluid{
padding-left:0px;
padding-right:0px;
}

#myNavbar{
padding-left:0px;
padding-right:0px;
}

最佳答案

使用 fixed Bootstrap navbar ,你需要做的就是给导航栏一个 navbar-fixed-top 的类:

<nav class="navbar navbar-default navbar-fixed-top">

我假设您希望您的绿色自定义标题贴在屏幕顶部,导航栏上方。您还需要为其提供相同的类,同时为导航栏提供一个等于自定义标题高度的 top 偏移量:

<div class="header navbar-fixed-top">

.navbar.navbar-default {
top: 155px;
}

我创建了一个 fiddle 来展示这个 here .

希望对您有所帮助! :)

关于jquery - 粘性 Bootstrap 导航栏不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42989729/

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