提问者:小点点

粘滞导航栏无法正确显示


我正在构建一个导航栏,但我在正确显示粘滞部分时遇到了麻烦。

正如您所看到的,它显示出来了,但是菜单项被移到了左边,并且背景不是全宽的。 基本上我想做的是当我滚动时,菜单项所在的标题的完整导航部分应该出现。

https://codepen.io/dtommy79/pen/yleaymw

null

$(document).ready(function() {
  
  $(window).scroll(function () { 
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 180) {
      $('.menu-container').addClass('sticky-header');
    }
    if ($(window).scrollTop() < 181) {
      $('.menu-container').removeClass('sticky-header');
    }
  });
});
body { background-color: #ccc; }
/* Navigation */
#style-2-top-bar {
	background-color: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: 18px;
}

#logo a img {
	padding-bottom: 10px;
}

/* header details */
.details-block .block .media i {
	background-color: #0087be;
	color: #fff;
    padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 13px;
    font-size: 18px;
    height: 40px;
    line-height: 20px;
    width: 40px;
	border-radius: 10%;
}

.details-block .block .media .media-body h5 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 0;
}

.details-block .block .media .media-body p {
	font-size: 13px;
}

.details-block .block:not(:last-child) {
	margin-right: 20px;
}

/* Main navigation */
#main-nav-wrapper {
	height: 50px;
  background-color: #fff;
}

#main-nav-wrapper .header-main-section {
	position: relative;
}

.sticky-header {
	position: fixed;
	top: 0;
	z-index: 10000;
	background-color: #ffffff;
}

#main-nav-wrapper .header-main-section .menu {
	float: left;
	margin-top: 10px;
	margin-left: -50px;
}

.menu li {
  list-style: none;
  display: inline-block;
}

.menu li a {
  color: #2b2b2b;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: .4s;
  font-size: 14px;
  font-weight: 600;
}

.show-menu-btn, .hide-menu-btn {
  transition: .4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}

.show-menu-btn {
  float: right;
}

.show-menu-btn i {
  line-height: 80px;
}

.menu a:hover, .show-menu-btn:hover, .hide-menu-btn:hover {
  color: #3498db;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

/* Drop down menu style */
#main-nav-wrapper .header-main-section ul ul {
	position: absolute;
	top: 50px;
	background: #ffffff;
	border-top-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-style: solid;
	border-color: #0087be;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	opacity: 0;
	visibility: hidden;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform-origin: center top 0;
	-webkit-transform-origin: center top 0;
	-moz-transform-origin: center top 0;
	-ms-transform-origin: center top 0;
	-o-transform-origin: center top 0;
	transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	padding: 0;
	z-index: 1000;
}

#main-nav-wrapper .header-main-section ul li:hover > ul {

  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  -moz-transform-origin: center top 0;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}

#main-nav-wrapper .header-main-section ul ul li {
  position: relative;
  margin: 0px;
  width: 180px;
  float: none;
  display: block;
  line-height: 50px;
}

#main-nav-wrapper .header-main-section ul ul li:not(:last-child) {
	border-bottom: 1px solid rgba(57,81,104, .2);
}

#main-nav-wrapper .header-main-section ul ul li a {
	display: block;
	font-size: 12px;
}

/* Content */

#hero {
	background: url('../images/medicalbg-2.jpg') rgba(0,0,0, .8);
	padding-top: 50px;
	padding-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<header id="style-2-header">

	<div id="style-2-top-bar">

		<div class="container">

			<div class="row">

				<div class="col-lg-3">

					<div id="logo">
						<a href="">
							<img class="img-fluid" src="https://dailyenglishtests.com/logo-dark.png" width="227" height="50">
						</a>
					</div>

				</div>

				<div class="col-lg-9">

					<div class="details-block d-flex justify-content-end">
						
						<div class="block">
							<div class="media">
								<i class="fas fa-map-marker-alt mr-2"></i>
								<div class="media-body">
									<h5>One Canada Square,</h5>
									<p>Canary Wharf, United Kingdom.</p>
								</div>
							</div>
						</div>

						<div class="block">
							<div class="media">
								<i class="far fa-clock mr-2"></i>
								<div class="media-body">
									<h5>Mon-Fri: 9am to 5pm</h5>
									<p>Saturday/Sunday: Closed</p>
								</div>
							</div>
						</div>

						<div class="block">
							<div class="media">
								<i class="fas fa-headset mr-2"></i>
								<div class="media-body">
									<h5>+12 123 456 789</h5>
									<p><a href="mailto:info@yoursite.com">info@yoursite.com</a></p>
								</div>
							</div>
						</div>

					</div>

				</div>

			</div>

		</div> <!-- End .container -->

	</div> <!-- End #header-logo-bar -->

	<div id="main-nav-wrapper">
	
		<div class="header-main-section">

			<div class="menu-container">
				<div class="container">
					<input type="checkbox" id="chk">
					<label for="chk" class="show-menu-btn">
						<i class="fas fa-ellipsis-h"></i>
					</label>

					<ul class="menu">
						<li><a href="#">Home</a></li>
						<li><a href="#">Blog</a></li>
						<li>
							<a href="#" aria-haspopup="true"><i class="fas fa-chevron-down"></i> My Account</a>
							<ul>
								<li><a href="#"><i class="fas fa-user-cog"></i> Dashboard</a></li>
								<li><a href="#"><i class="fas fa-user-md"></i> Profile</a></li>
								<li><a href="#"><i class="fas fa-sign-out-alt"></i> Sections</a></li>
								<li><a href="#"><i class="fas fa-sign-out-alt"></i> Change Email</a></li>
							</ul>
						</li>

						<label for="chk" class="hide-menu-btn">
							<i class="fas fa-times"></i>
						</label>
					</ul>
				</div>
			</div>

		</div>
	
	</div> <!-- End #header-main-sticky-wrapper -->


</header>




 <section id="hero">

	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>

	</div>

 </section>
  
<section>
	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



			</div>
		</div>

	</div>
</section>

null


共2个答案

匿名用户

左:0;右:0;添加到中。粘头会解决您的问题吗? 我希望我能理解你的问题。

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;  /* Add this line */
  right: 0;  /* Add this line */
  z-index: 10000;
  background-color: #ffffff;
}

null

$(document).ready(function() {

  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > 180) {
      $('.menu-container').addClass('sticky-header');
    }
    if ($(window).scrollTop() < 181) {
      $('.menu-container').removeClass('sticky-header');
    }
  });
});
body {
  background-color: #ccc;
}


/* Navigation */

#style-2-top-bar {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 18px;
}

#logo a img {
  padding-bottom: 10px;
}


/* header details */

.details-block .block .media i {
  background-color: #0087be;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 13px;
  font-size: 18px;
  height: 40px;
  line-height: 20px;
  width: 40px;
  border-radius: 10%;
}

.details-block .block .media .media-body h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
}

.details-block .block .media .media-body p {
  font-size: 13px;
}

.details-block .block:not(:last-child) {
  margin-right: 20px;
}


/* Main navigation */

#main-nav-wrapper {
  height: 50px;
  background-color: #fff;
}

#main-nav-wrapper .header-main-section {
  position: relative;
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;  /* Add this line */
  right: 0;  /* Add this line */
  z-index: 10000;
  background-color: #ffffff;
}

#main-nav-wrapper .header-main-section .menu {
  float: left;
  margin-top: 10px;
  margin-left: -50px;
}

.menu li {
  list-style: none;
  display: inline-block;
}

.menu li a {
  color: #2b2b2b;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: .4s;
  font-size: 14px;
  font-weight: 600;
}

.show-menu-btn,
.hide-menu-btn {
  transition: .4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}

.show-menu-btn {
  float: right;
}

.show-menu-btn i {
  line-height: 80px;
}

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #3498db;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}


/* Drop down menu style */

#main-nav-wrapper .header-main-section ul ul {
  position: absolute;
  top: 50px;
  background: #ffffff;
  border-top-width: 3px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: solid;
  border-color: #0087be;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform-origin: center top 0;
  -webkit-transform-origin: center top 0;
  -moz-transform-origin: center top 0;
  -ms-transform-origin: center top 0;
  -o-transform-origin: center top 0;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  padding: 0;
  z-index: 1000;
}

#main-nav-wrapper .header-main-section ul li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  -moz-transform-origin: center top 0;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}

#main-nav-wrapper .header-main-section ul ul li {
  position: relative;
  margin: 0px;
  width: 180px;
  float: none;
  display: block;
  line-height: 50px;
}

#main-nav-wrapper .header-main-section ul ul li:not(:last-child) {
  border-bottom: 1px solid rgba(57, 81, 104, .2);
}

#main-nav-wrapper .header-main-section ul ul li a {
  display: block;
  font-size: 12px;
}


/* Content */

#hero {
  background: url('../images/medicalbg-2.jpg') rgba(0, 0, 0, .8);
  padding-top: 50px;
  padding-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<header id="style-2-header">

  <div id="style-2-top-bar">

    <div class="container">

      <div class="row">

        <div class="col-lg-3">

          <div id="logo">
            <a href="">
              <img class="img-fluid" src="https://dailyenglishtests.com/logo-dark.png" width="227" height="50">
            </a>
          </div>

        </div>

        <div class="col-lg-9">

          <div class="details-block d-flex justify-content-end">

            <div class="block">
              <div class="media">
                <i class="fas fa-map-marker-alt mr-2"></i>
                <div class="media-body">
                  <h5>One Canada Square,</h5>
                  <p>Canary Wharf, United Kingdom.</p>
                </div>
              </div>
            </div>

            <div class="block">
              <div class="media">
                <i class="far fa-clock mr-2"></i>
                <div class="media-body">
                  <h5>Mon-Fri: 9am to 5pm</h5>
                  <p>Saturday/Sunday: Closed</p>
                </div>
              </div>
            </div>

            <div class="block">
              <div class="media">
                <i class="fas fa-headset mr-2"></i>
                <div class="media-body">
                  <h5>+12 123 456 789</h5>
                  <p><a href="mailto:info@yoursite.com">info@yoursite.com</a></p>
                </div>
              </div>
            </div>

          </div>

        </div>

      </div>

    </div>
    <!-- End .container -->

  </div>
  <!-- End #header-logo-bar -->

  <div id="main-nav-wrapper">

    <div class="header-main-section">

      <div class="menu-container">
        <div class="container">
          <input type="checkbox" id="chk">
          <label for="chk" class="show-menu-btn">
						<i class="fas fa-ellipsis-h"></i>
					</label>

          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li>
              <a href="#" aria-haspopup="true"><i class="fas fa-chevron-down"></i> My Account</a>
              <ul>
                <li><a href="#"><i class="fas fa-user-cog"></i> Dashboard</a></li>
                <li><a href="#"><i class="fas fa-user-md"></i> Profile</a></li>
                <li><a href="#"><i class="fas fa-sign-out-alt"></i> Sections</a></li>
                <li><a href="#"><i class="fas fa-sign-out-alt"></i> Change Email</a></li>
              </ul>
            </li>

            <label for="chk" class="hide-menu-btn">
							<i class="fas fa-times"></i>
						</label>
          </ul>
        </div>
      </div>

    </div>

  </div>
  <!-- End #header-main-sticky-wrapper -->


</header>




<section id="hero">

  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>

</section>

<section>
  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



      </div>
    </div>

  </div>
</section>

匿名用户

只需将width:100%;添加到CSS中的.sticky-header类。