如何在导航栏菜单中实现平滑的向下滑动效果
Posted
技术标签:
【中文标题】如何在导航栏菜单中实现平滑的向下滑动效果【英文标题】：How to achieve smoothe slide down effect in Navbar Menu 【发布时间】：2018-03-24 04:43:24 【问题描述】：目标 - 我想在一些滚动后实现向下滑动（用于导航栏）效果。我实际上实现了我想要的，但我遇到了问题。
问题 - 当向上滚动到顶部时，导航栏变得粘滞而没有效果，这有点吸引人。谁能帮我解决这个问题？
你可以在Codepen看到我的代码。
// 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" 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" >
</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>【问题讨论】：
好吧，我们不能，实际上，您的链接不起作用。并且在实际问题中也需要发布代码。 我已经更新了链接@Roberrrt 所以您希望导航栏在向上滚动时滑入？ 是的，类似的东西看起来并不奇怪@Roberrrt 任何人请回答 【参考方案1】：因此，我更改了您的粘性标题 JS，以在向上滚动时添加一个类，并在从顶部滚动 200 像素后添加一个显示类。
JS
// Sticky Header
jQuery(window).scroll(function()
var scroll = jQuery(window).scrollTop();
if (scroll > 200)
jQuery("#header").addClass("show");
else
jQuery("#header").removeClass("show");
);
var lastScrollTop = 0;
jQuery(window).scroll(function(event)
var st = jQuery(this).scrollTop();
if (st > lastScrollTop)
jQuery("#header").removeClass("up");
else
jQuery("#header").addClass("up");
lastScrollTop = st;
);
然后添加 CSS
#header-sec #header,
#header-sec #header.up
position: absolute;
top: 0;
-webkit-transition: top 500ms ease-out ;
-moz-transition: top 500ms ease-out ;
-o-transition: top 500ms ease-out ;
transition: top 500ms ease-out ;
#header-sec #header.show
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);
#header-sec #header.up.show
position: fixed !important;
top: 0;
-webkit-animation-name: slideup;
animation-name: slideup;
-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 slideup
0%
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
100%
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
@keyframes slideup
0%
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
100%
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
希望你能用这个
【讨论】：
以上是关于如何在导航栏菜单中实现平滑的向下滑动效果的主要内容，如果未能解决你的问题，请参考以下文章
React - 向下滚动时向上滑动固定导航栏，向上滚动时向下滑动