Question

编辑：预期效果的示例here

第二编辑：答案实际上非常简单，我之前已将页眉和页脚拆分到一个单独的文件中，并将导航栏意外地置于body标签之外。将其移入其中并将背景设置在body标签中之后，然后将导航色背景色选择器的属性rgba（5,5,5,0.5）用于导航栏，一切都很好。

如您所见，我有一个导航栏和一条横幅。目前，我在导航栏上使用sticky-top类。导航栏是透明的。

我希望导航栏跟随我进入页面，因为这是单页设计，导航栏是哈希链接。但是，我也希望导航栏与下一个元素重叠并居中（就像我说的那样：透明）。该页面应在下一个元素中该背景图像的顶部开始，并且导航栏重叠。

我尝试了位置：绝对，确实降低了导航栏，但随后将其固定并一直向左移动。

我还尝试了this线程中的建议，该建议建议将自定义类添加到导航栏，并增加顶部元素，如下所示：

.sticky-offset {
top: 56px;
}

但是，这只会将其永久性向下推，而下一个元素上方仍然有空白。然后，我试图减小身体的大小，但这也没有用。

我还尝试了将overflow：auto添加到navbar类，但没有执行任何操作。

这是我的html：

  <div id="navbar-main" class="navbar sticky-top sticky-offset navbar-
 expand-md navbar-light px-auto mx-auto">

 <!-- <a class="navbar-brand" href="#">Navbar</a> -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" 
 data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-center" 
id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
    <a class="nav-item nav-link active" href="#section-banner">Home<span 
class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
    <a class="nav-item nav-link" href="#section-timeline">Our Journey</a>
  </li>
  <li class="nav-item">
    <a class="nav-item nav-link" href="#section-gallery">Party 
Photos!!!</a>
  </li>
  <li class="nav-item">
    <a class="nav-item nav-link" href="#section-special">Special 
Thanks</a>
  </li>
  <hr>
  <li class="nav-item">
      <a class="nav-item nav-link" href="logout_dummy.php">Logout</a>
  </li>
   </ul>
  </div>

 </div>

<section id="section-banner" class="parallax">
    <h1>Test</h1>
</section>

CSS：

html {
 scroll-behavior: smooth;
}

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

.container {
  width: 100%;
  height: 100%;
}
/*
#section-carousel{
}

.carousel{
 z-index: -99;
}

.carousel-indicators li{
 background-color: black;
}

.carousel-indicators .active{
 background-color: red;
}
*/
img.rounded-circle{
  height: auto;
  width: auto;
}

.license{
  text-aling: center;
}

body {
 height: 90%; 
}

.navbar-nav > .nav-item > a {
  position: relative;
}

header, p {
  text-align: center; 
}


html,
body {
  height: 175% !important;
}

header {
  height: 4em;
 background: #845;
}

.parallax {
  background-image: url("../../images/web_ready/welcome_banner.png");
  background-repeat: no-repeat;
  background-size: cover;

}

.parallax h1 {
  text-align: center;
  font-size: 4em;
  padding: 15rem 0;
  color: white;
  background: rgba(29, 25, 29, 0.37);
  font-family: "Trebuchet MS"
}

Answer 1

您需要使用fixed-top类并通过jquery动态添加它。这样的事情。

$( document ).ready( function () {

	var nav = $(".navbar");
	$(window).scroll(function() {
		// Add class after 50px from the top
		if ($(window).scrollTop() >= 50) {
			nav.addClass("fixed-top");
		} else {
			nav.removeClass("fixed-top");
		}
	});
  
});

html,
body {
	height: 175% !important;
}

.parallax {
	background-image: url("https://source.unsplash.com/random/1280x1080");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center; 

}

.parallax h1 {
	text-align: center;
	font-size: 4em;
	padding: 15rem 0;
	color: white;
	background: rgba(29, 25, 29, 0.37);
	font-family: "Trebuchet MS"
}

.header-absolute {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 1030;
}

.bg-transition {
	transition: background .3s;
}

.fixed-top.bg-fixed {
	background: rgba(26, 26, 26, 0.9) !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
  
<header class="header header-absolute">
	<!-- Top Bar-->
	<div class="top-banner bg-white text-dark p-2 text-center">Your top banner</div>
	<!-- Navbar-->
	<nav class="navbar navbar-expand-lg navbar-dark bg-transparent bg-transition bg-fixed">
		<!-- <a class="navbar-brand" href="#">Navbar</a> -->
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<!-- Navbar Collapse -->
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav mx-auto">
				<li class="nav-item active">
					<a class="nav-item nav-link active" href="#section-banner">Home<span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-item nav-link" href="#section-timeline">Our Journey</a>
				</li>
				<li class="nav-item">
					<a class="nav-item nav-link" href="#section-gallery">Party 
					Photos!!!</a>
				</li>
				<li class="nav-item">
					<a class="nav-item nav-link" href="#section-special">Special 
					Thanks</a>
				</li>
				<hr>
				<li class="nav-item">
					<a class="nav-item nav-link" href="logout_dummy.php">Logout</a>
				</li>
			</ul>
		</div>
	</nav>
</header>

<section id="section-banner" class="parallax">
	<h1>Test</h1>
</section>

我无法让粘性顶部导航栏与下一个元素引导程序4重叠

1 个答案: