jquery - Sticky navbar won't show up properly
问题描述
I'm building a navigation bar, but I'm having trouble displaying the sticky part properly.
As you can see, it shows up, but the menu items are moved to the left, and the background isn't full-width. Basically what I'd like to do is when I scroll, the full navigation part of the header Where the menu items are) should appear.
https://codepen.io/dtommy79/pen/yLeayMW
$(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>解决方案
添加left: 0;和right: 0;到.sticky-header将解决您的问题？我希望我能理解你的问题。
.sticky-header {
position: fixed;
top: 0;
left: 0; /* Add this line */
right: 0; /* Add this line */
z-index: 10000;
background-color: #ffffff;
}
$(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>推荐阅读
- javascript - 如何在不知道其类或 ID 的情况下定位特定元素，但确实拥有该元素的所有 DOM 详细信息
- vue.js - 对于 Vuex Store 中的每个项目，分配一个分数（基于计算），然后按分数排序
- php - 为事件日历插件添加新事件时预填充 post_title 和 post_content
- mongoose - Mongoose：填充嵌套的 id 数组
- php - Wordpress WooCommerce ChargeLogic 测试结帐错误
- ios - 如何使我的 ReferenceWritableKeyPath 类通用
- sql - 对二进制数据字段具有唯一约束的批量插入的最佳数据库
- python - 无法从同一 docker swarm 上运行的其他服务连接到 postgres 服务？
- angular - 登录后重定向用户不更新地址栏
- c++ - 重载运算符>>从二叉树中删除一个节点