我想让我的导航栏具有粘性,它在常规屏幕视图上工作,但在移动视图上不起作用。
我为宽屏创建了一个常规导航栏,在移动视图中创建了一个汉堡式导航栏。
我还在学习前端,所以我知道下面的代码很糟糕。任何建议将不胜感激。
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar.classList.remove("sticky");
navbar_mobile.classList.remove("sticky_mobile");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky_mobile {
position: fixed !important;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
@media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
@media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li><a href="#home">Home</a></li>
<li><a href="#about-us">About us</a></li>
<li><a href="#new-product">New Products</a></li>
<li><a href="#more">More</a></li>
</ul>
</nav>
</div>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#home"><li>Home</li></a>
<a href="#about-us"><li>About us</li></a>
<a href="#new-product"><li>New Products</li></a>
<a href="#more"><li>More</li></a>
</ul>
</div>
</nav>
基本上,我在导航栏上方有更多元素。
我不确定我做错了什么,但是移动视图上的粘性导航栏会粘在顶部,而不是仅在用户滚动时粘住。
答案 0 :(得分:0)
为此提供了一个 CSS 功能。
position: sticky;
答案 1 :(得分:0)
在切换到粘性模式之前尝试添加一点缓冲区。在下面的修改示例中,在触发粘性模式之前有 100 像素的缓冲区。还删除了 sticky_mobile
类,因为它们都在做同样的事情。
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop + 100;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop + 100;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
@media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
@media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li><a href="#home">Home</a></li>
<li><a href="#about-us">About us</a></li>
<li><a href="#new-product">New Products</a></li>
<li><a href="#more">More</a></li>
</ul>
</nav>
</div>
a
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
b
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
c
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
d
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
e
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
f
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#home"><li>Home</li></a>
<a href="#about-us"><li>About us</li></a>
<a href="#new-product"><li>New Products</li></a>
<a href="#more"><li>More</li></a>
</ul>
</div>
</nav>
答案 2 :(得分:0)
我的 javascript 中有一个错误,这是它无法添加新类“粘性”的原因。 这不是最好的,但它有效。
<script>
window.onscroll = function() {
myFunction();
myFunction_mobile();
}
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
function myFunction_mobile() {
if (window.pageYOffset >= sticky_mobile) {
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar_mobile.classList.remove("sticky_mobile");
}
}
</script>