如何解决对移动导航和背景颜色进行动画处理,而不会滞后于移动设备
在运行的代码中可以看到;导航条在页面滚动上固定在顶部,将其徽标更改为蓝色,并且背景也为白色。 在移动设备上,菜单应该向下滑动或平滑显示,而不会在移动屏幕上很好地滞后于内容。
我一直在努力使移动菜单的下滑和背景颜色无缝平滑地动画,而不会对移动设备造成任何滞后。我尝试过max-height
来设置导航栏的高度。我尝试过的所有操作都会导致我测试过的所有移动设备都滞后。
老实说,我已经两天没做到了。我用尽了所有方法,现在感到沮丧。我不知道为什么它可以在台式机上平稳运行,但是在移动设备上却严重滞后。
我该怎么办?
const logo = document.getElementById("pagelogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixednavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll',() => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixednavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixednavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click",() => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click",() => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if(!fixednavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,*::before,*::after {
margin: 0;
padding: 0;
}
html {
Box-sizing: border-Box;
font-size: 62.5%;
}
body {
Box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page container to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
Box-shadow: 0 10px 10px rgba(0,0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
@media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
Box-shadow: 0px 5px 10px rgba(0,0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page logo" class="page__logo-img logo-white" id="pagelogo">
</a>
</div>
<div class="page__menu home">
<a href="">Menu 1</a>
<a href="">Menu 2</a>
<a href="">Menu 3</a>
<a href="">Menu 4</a>
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Eius,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>
解决方法
您在padding
类上设置的height
和.scroll
似乎很震撼。
从这些部分:
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
box-shadow: 0 10px 10px rgba(0,0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
这是您想要的吗?
const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll',() => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixedNavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixedNavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click",() => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click",() => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if (!fixedNavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,*::before,*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page coontainer to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
height: 80px;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* Logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Naviagtion Container on scroll settings */
.page__navigation.scrolled {
background: #fff !important;
box-shadow: 0 10px 10px rgba(0,0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
@media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
box-shadow: 0px 5px 10px rgba(0,0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
</a>
</div>
<div class="page__menu home">
<a href="">Menu 1</a>
<a href="">Menu 2</a>
<a href="">Menu 3</a>
<a href="">Menu 4</a>
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Eius,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。