2
Ziel - Ich wollte nach einigem Scrollen einen Slide-Down (für Navbar) -Effekt erreichen. Ich habe tatsächlich erreicht, was ich wollte, aber ich bekomme ein Problem.So erreichen Sie glätten Slide-Down-Effekt im Navbar-Menü
Problem - Wenn Sie bis zum Anfang scrollen, wird die Navigationsleiste klebrig, ohne Wirkung und es nimmt den Charme. Kann mir jemand helfen, das zu beheben?
Sie können meinen Code hier unter Codepen sehen.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#header').addClass('sticky-header');
$('#header .mo-row').removeClass('sticky-border');
} else {
$('#header').removeClass('sticky-header');
$('#header .mo-row').addClass('sticky-border');
}
});
var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebarBox.classList.remove('active');
} else {
this.classList.add('active');
sidebarBox.classList.add('active');
}
});
// accordion js
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active2');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active2')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active2');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});html {
box-sizing: border-box;
}
body {
margin: 0;
height: 1000px;
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
.mo-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 999;
position: relative;
}
.mo-row {
width: 95%;
margin: 0 auto;
}
.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
content: " ";
display: table;
}
.mo-grid:after,
.mo-row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 10px;
}
@media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
@media screen and (min-width: 992px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
.hello-bar {
height: 40px;
line-height: 39px;
background: #52ae56;
text-align: center;
color: #fff;
}
.hello-bar a {
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.hello-bar a span {
font-weight: bold;
}
.sticky-header {
background-color: #fff !important;
box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
height: 65px;
line-height: 65px;
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@-webkit-keyframes slidedown {
0% {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slidedown {
0% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.sticky-border {
border-bottom: 1px solid #e8e8e8;
}
#header-sec {
position: relative;
z-index: 9999999;
height: 65px;
line-height: 65px;
/* Fold Out */
/* accordion css */
}
#header-seC#header {
background-color: transparent;
width: 100%;
height: 66px;
line-height: 64px;
position: absolute;
}
#header-seC#header .navbar-logo {
height: 65px;
line-height: 65px;
cursor: pointer;
}
#header-seC#header .navbar-logo img {
height: 75px;
margin-top: -4px;
margin-left: -17px;
}
#header-sec .nav ul {
background-color: transparent;
}
#header-sec .nav ul > li {
display: inline-block;
position: relative;
}
#header-sec .nav a {
display: block;
padding: 10px 18px 10px 15px;
font-size: 0.9em;
line-height: 1.2em;
color: #0d1739;
font-weight: 400;
}
#header-sec .nav a:hover {
text-decoration: none;
}
#header-sec .nav li ul {
background-color: #fff;
}
#header-sec .nav li ul li {
width: 200px;
display: block;
text-align: left;
}
#header-sec .nav li ul a {
border: none;
color: #333;
}
#header-sec .nav li ul a:hover {
background: #333;
color: #fff;
}
#header-sec .nav li ul {
position: absolute;
left: 0;
top: 52px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
background: #fff;
padding: 10px 30px;
border-bottom: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
border-bottom: none;
}
#header-sec a {
color: #343838;
}
#header-seC#box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
right: -250px;
width: 250px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-seC#box.active {
right: 0px;
opacity: 1;
}
#header-seC#items {
position: relative;
top: 8.7%;
line-height: normal;
}
#header-seC#items .item {
position: relative;
cursor: pointer;
font-size: 1em;
/* originally 2ems */
padding: 10px 20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#header-seC#items .item:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-seC#btn {
position: absolute;
z-index: 5;
top: 22px;
right: 9px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-seC#btn div {
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: #1d1f20;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-seC#btn.active {
right: 9px;
}
#header-seC#btn.active div {
background-color: #343838;
}
#header-seC#btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#header-seC#btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#header-seC#btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
overflow: hidden;
line-height: normal;
}
#header-sec .accordion-section-title {
cursor: pointer;
width: 100%;
transition: all linear 0.15s;
-webkit-transition: all linear 0.15s;
-moz-transition: all linear 0.15s;
-ms-transition: all linear 0.15s;
-o-transition: all linear 0.15s;
position: relative;
display: block;
padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
display: none;
background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
display: block;
}
#header-seC#box, #header-seC#btn {
display: none;
}
@media screen and (max-width: 992px) {
#header-sec .navbar-menu {
display: none;
}
#header-seC#box, #header-seC#btn {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
<img src="img/notification.png" alt="" style="width: 17px;"></a>
</div>
</div>
</div>
</div>
<section id="header-sec">
<header id="header">
<div class="mo-container">
<div class="mo-row sticky-border">
<nav class="col-sm-6 col-md-4 col-lg-2">
<div class="navbar-logo">
<img src="img/logo-dark.png" alt="">
</div>
</nav>
<nav class="col-sm-6 col-md-8 col-lg-10 text-right">
<div class="navbar-menu nav">
<ul>
<li>
<a href="">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Flows</a></li>
<li><a href="#">Web Push</a></li>
<li><a href="#">Email Campaigns</a></li>
<li><a href="#">In-app Nativ</a></li>
<li><a href="#">User Intelligence</a></li>
<li><a href="#">Engagement Platform</a></li>
<li><a href="#">Smart Triggers</a></li>
</ul>
</li>
<li>
<a href="">Customers <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Customer Stories</a></li>
<li><a href="#">Help & Support</a></li>
<li><a href="#">Developers Docs</a></li>
</ul>
</li>
<li>
<a href="">Company <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li><a href="">Pricing</a></li>
<li><a href="">Login</a></li>
<li><a href="">Sign Up</a></li>
<li>
<a href="" style="padding-right: 0;">
<button class="button primary">Free Demo</button>
</a>
</li>
</ul>
</div>
<div id="box">
<div id="items">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li><a href="#">Flows</a></li>
<li><a href="#">Web Push</a></li>
<li><a href="#">Email Campaigns</a></li>
<li><a href="#">In-app Nativ</a></li>
<li><a href="#">User Intelligence</a></li>
<li><a href="#">Engagement Platform</a></li>
<li><a href="#">Smart Triggers</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-2" class="accordion-section-content">
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-3" class="accordion-section-content">
<ul>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Jobs</a></li>
</ul>
</div>
</div>
</div>
<div class="item">Pricing</div>
<div class="item">Login</div>
<div class="item">Sign Up</div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</nav>
</div>
</div>
</header>
</section>
gut benutzen können, können wir nicht, tatsächlich, Ihr Link nicht funktioniert. Und es ist etwas erforderlich, den Code in der eigentlichen Frage auch zu veröffentlichen. – Roberrrt
Ich habe den Link @Roberrrt aktualisiert. –
Sie möchten also, dass die Navigationsleiste beim Scrollen einrastet? – Roberrrt