【发布时间】：2020-07-16 23:47:07
【问题描述】：
在我的索引页面中，我使用了一个粘性导航栏，我还使用了一个 JavaScript 代码来测量屏幕的高度，并在我们打开它时将导航栏粘贴到页面底部，然后当我们滚动导航栏进入顶部时它会粘在页面上，但是在我向下滚动后，翻转立方体会出现在粘性导航栏上，我该怎么办？
这是我的问题的图片。
这些是我的代码
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
background: url("background.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;
-webkit-transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;width:100%;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
-webkit-text-stroke: 2px black;
color: rgba(255,248,248,0.22);
}
.header p {
-webkit-text-stroke: 1px black;
color: rgba(255,255,255,1);
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
margin-bottom: 0!important;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
overflow: hidden;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
}
.main::after {
content: "";
clear: both;
display: table;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
.container {
font-family: Arial;
width: 100%;
background-color: rgb(48, 48, 48);
overflow: hidden;
}
.container::after {
content: "";
clear: both;
display: table;
padding: 5px;
}
.flip-parent {
position: relative;
perspective: 1200px;
vertical-align: baseline;
margin-bottom: -0px;
overflow: hidden;
}
.flip {
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
/* transform-origin: center bottom; */
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
transform: translateY(0px);
height: 770px;
width: 100%;
color: white;
font-size: 24px;
/* CENTER OUR CONTENT */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.flip:before {
width: 100%;
z-index: 2;
text-transform: uppercase;
}
#first {
background-color: #D64541;
float: right;
padding: 5px;
white-space: pre;
}
#second {
background-color: #59ABE3;
float: right;
padding: 5px;
}
#third {
background-color: #E08283;
float: right;
}
#fourth {
background-color: #E08283;
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Styles.css">
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body>
<div class="header" id="headerid">
<h1 class="siteName" id="siteNameID">Digital World</h1>
<p id="archID">World Best <b>architecture</b> website</p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Services </a>
<a href="projects.html">Projects</a>
<a href="#" class="right">Contanct us</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<div class="container">
<section>
<div class="flip-parent">
<div class="flip" id="first">
<p class="pixel-counter"></p>
</div>
</div>
</section>
<section>
<div class="flip-parent">
<div class="flip" id="second">
<p class="pixel-counter"></p>
</div>
</div>
</section>
<section>
<div class="flip-parent">
<div class="flip" id="third">
<p class="pixel-counter"></p>
</div>
</div>
</section>
<section>
<div class="flip-parent">
<div class="flip" id="fourth">
<p class="pixel-counter"></p>
</div>
</div>
</section>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script id="rendered-js">
$(window).on('scroll', function () {
$('.flip').each(function () {
var scrollTop = $(window).scrollTop(),
parentElementOffsetTop = $(this).parent().offset().top,
parentDistanceTop = parentElementOffsetTop - scrollTop;
var elementHeight = $(this).height();
var distanceBottom = parentDistanceTop + elementHeight;
var opacity = distanceBottom / elementHeight;
var rotateSpeed = (parentDistanceTop / 8).toFixed(2) * -1;
if (rotateSpeed <= 0) {
rotateSpeed = 0;
} else if (rotateSpeed >= 90) {
rotateSpeed = 90;
}
$(this).find(".pixel-counter").html(distanceBottom + "px is the parents bottom- distance to top of viewport");
$(this).css({
"transform": " translateY(0px) rotateX(" + rotateSpeed + "deg)",
"opacity": opacity });
});
});
//# sourceURL=pen.js
</script>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
<script>
if ($(window).width() < 792){
document.getElementById("siteNameID").style.fontSize = "35px";
document.getElementById("archID").style.fontSize = "20px";
var x = window.innerHeight;
var x = x/2 - 86;
var x = x + "px";
}
else {
document.getElementById("siteNameID").style.fontSize = "100px";
document.getElementById("archID").style.fontSize = "30px";
var x = window.innerHeight;
var x = x/2 - 179;
var x = x + "px";
}
document.getElementById("headerid").style.paddingTop = x;
document.getElementById("headerid").style.paddingBottom = x;
</script>
</html>【问题讨论】：
-
嗨，Aschkan，结帐MDN: The stacking context 和CSS z-index Property。您需要将导航栏放在其余部分之上。线索：
z-index. -
.navbar {z-index: 1}（或更多...）
标签： javascript html jquery css navbar