粘性导航栏不能处理视差

时间：2018-04-08 22:20:03

标签： javascript html5 css3

我正在设计一个网站，其中所有网页都有一个标题，并在其下方有一个导航栏。 当页面滚动并且导航栏到达屏幕顶部时，javascript允许它粘住并保持在屏幕顶部。

在我的一个页面上，我使用的是HTML5和CSS3的纯视差滚动效果。问题是，似乎javascript无法检测导航栏何时到达屏幕顶部，此效果处于活动状态。

任何人都可以给我建议如何继续并获取javascript来检测位置，或者我可以做些什么来使我的视差效果从导航栏下方运行，以便导航栏完全独立于效果。< / p> 

// When the user scrolls the page, execute myFunction
		window.onscroll = function() {myFunction()};

		// Get the navbar
		var navbar = document.getElementById("navbar");

		// Get the offset position of the navbar
		var sticky = navbar.offsetTop;

		// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
		function myFunction() {
  			if (window.pageYOffset >= sticky) {
    			navbar.classList.add("sticky")
  				} 
			else {
    			navbar.classList.remove("sticky");
  			}
		} 
		// Get the modal
		var modal = document.getElementById('id01');

		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
    		if (event.target == modal) {
        		modal.style.display = "none";
    		}
		}
@import url(https://fonts.googleapis.com/css?family=Nunito);

html {
  height: 100%;
  overflow: hidden;
}

body {  
	
	background: #222222;
	margin:0;
	padding:0px;
	perspective: 1px;
	transform-style: preserve-3d;
	height: 100%;
  	overflow-y: scroll;
  	overflow-x: hidden;
  	font-family: Nunito;
}
h2 {
   font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}

.slide {
  	position: relative;
  	padding: 25vh 10%;
  	min-height: 100vh;
  	width: 100vw;
  	box-sizing: border-box;
  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	transform-style: inherit;
}
#img2 {
  position: absolute;
  top: 50%;
  left: 80%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-104%) translateY(-100%) rotate(9deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
#img2:last-of-type{transform: translateZ(.4px) scale(.6) translateX(-194%) translateY(-40%) rotate(-5deg);}

#img1 {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
#img1:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide:nth-child(2n) .title {
  margin-left: auto;
  margin-right: 100;
}

.slide:nth-child(2n+1) .title {
  margin-left: 100;
  margin-right: auto;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
  background-image: url("https://lorempixel.com/640/480/abstract/6/");
  z-index:2;
}

#title h1 {
 transform: translateZ(.25px) scale(.75);
 transform-origin: 50% 100%;

}

#slide1:before {
  background-image: url("https://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
}

#slide2 {
  background-image: url("https://lorempixel.com/640/480/abstract/3/");
  z-index:2;
}

#slide3:before {
  background-image: url("https://lorempixel.com/640/480/abstract/5/");
  transform: translateZ(-1px) scale(2);
}

#slide4 {
  background: #222;
	hight:100%;
}
@import url(https://fonts.googleapis.com/css?family=Nunito);
body {
    min-height:100%; 
    position:relative; 
    padding-bottom:20px; 
}
/*header position and styling*/
header {
	Position: absolute;
	background-image: url("https://lorempixel.com/640/480/abstract/4/");
	background-repeat: no-repeat;
	background-size: cover;
    width:100%;
	height: 120px;
	left: 0;
	top: 0;
	padding: 5px;
	border: #000000;
	z-index: 50;
}
.headerlogo {
	opacity: 0.8;
	Position: absolute;
	top: 5;
	width: 21%;
	height: 110px;	
	z-index: 51;
}
.headerContent {
    position: absolute;
	right: 0;
    top: 0;
    color: #25FF25;
    width: 20%;
    z-index: 51;
}
 /* Add a black background color to the top navigation */
nav {
	Position: absolute;
	width: 100%;
	left: 0px;
	top: 128px;
	z-index: 55;
    background-color: #333;
    overflow: hidden;
}
/* Style the links inside the navigation bar */
nav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	float: left;
}
/* Change the color of links on hover */
nav a:hover {
    background-color: #ddd;
    color: black;
	float: left;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  	position: sticky;
  	top: 0px;
  	width: 100%;
	left: 8px;
}
/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
	float: left;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
	float: left;
}
/* Fixed/sticky icon bar (vertically aligned 35% from the top of the screen) */
.icon-bar {
	left: 0;
  	position: fixed;
	z-index: 50;
  	top: 35%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

/* Copyright footer-wrap */
footer {
  	position: absolute; 
    left: 0 ; right: 0; bottom: 0; 
    height:20px;
}
footer a {
  	text-decoration: none;
  	color: #fff;
  	font-weight: bold;
	text-align: center;
}
footer a:hover {
  	color: #000;  
}
footer p {
	color: #BBBBBB;
  	padding: 0px 0;
	text-align: center;
}
footer h2 {
  	color: #fff;
  	margin: 0;
  	padding: 0 0px; 
	text-align: center;
}
/* Add padding to container elements */
.containers {
	font-family: Arial;
  	font-size: 17px;
  	color: #000;
	text-shadow: none;
	text-align: left;
	background-color: #f2f2f2;
  	padding: 5px 10px 10px 10px;
  	border: 1px solid lightgrey;
  	border-radius: 3px;
	width: 500px;	
}
* {box-sizing: border-box}
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 30%;
    top: 10%;
    width: 40%; /* Full width */
    height: 80%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 10px;
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
    margin: 10% auto 5% 16%; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 66%; /* Could be more or less, depending on screen size */
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elusen Rave</title>
	<!--Page Stylesheet-->
	<link href="Stylesheets/moreinfo.css" rel="stylesheet" type="text/css">
	<!--Site Stylesheet-->
	<link href="Stylesheets/Universal.css" rel="stylesheet" type="text/css">
	<!-- Load font awesome icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		footer {
  			position: absolute; 
			z-index: 50;
    		left: 0 ; right: 0; bottom: 150px; 			
		}
		span {
			
			font-family: "Times New Roman";
			font-size: 40%;
			text-decoration: none;
  			font-weight: bold;
			text-align: center;
		}
		
	</style>
</head>

<body>
	<header>
		<div class="headerContent">
			<p>
			<h3>Brought to you by: </h3>
			<h1>Polokwane Events</h1>
  			</p>
		</div>
		<img class="headerlogo" src="https://lorempixel.com/640/480/abstract/4/" alt="Header logo">
	</header>
	<nav id="navbar">
		<!-- Top nav bar -->
	 	<a href="Index.html">Home</a>
		<a href="moreinfo.html" class="active">More info</a>
		<a href="RaveMedia.html">Media</a>
		<a href="Donatios.html">Donation</a>
		<a href="bookings.html">Bookings</a>
		<a href="Contact.html">Contact</a>
		<a href="#about">Credits</a>		
	</nav>	
	<!-- The social media icon bar -->
	<div class="icon-bar">
  		<a href="https://www.facebook.com/" class="facebook"><i class="fa fa-facebook"></i></a>
  		<a href="https://twitter.com/?request_context=signup" class="twitter"><i class="fa fa-twitter"></i></a>
  		<a href="https://plus.google.com/people" class="google"><i class="fa fa-google"></i></a>
  		<a href="https://www.linkedin.com/feed/" class="linkedin"><i class="fa fa-linkedin"></i></a>
  		<a href="https://www.youtube.com/" class="youtube"><i class="fa fa-youtube"></i></a>
	</div>
	
	<!--modal and form-->
		<div id="id01" class="modal">
  			<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  			<form class="modal-content" action="/action_page.php">
    			<div class="containers">
					<h1>Home Page</h1>
					<br/>
					<p>The Home Page consist of the following: </p>
					<p>Header - Containing the logo and company name. </p>
					<p>Navigation bar - providing direct links to other pages and it sticks to the top of screen when scrolling down, it also contains the audio controls</p>
					<p>Social media sidebar - linking to different social media links and it is fixed in position </p>
					<p>Main content - Video background that gets covered with logo that is created by different parts using animations. </p>
					<p>Some text that leads to the date is also fading onto screen to try and capture attention of viewer. </p>
					<p>Footer - Copyright with links. I used an alert box to show where it would link if I had to link them. </p>
    			</div>
  			</form>
		</div>
	<script src="Script/Index.js"></script>
	<!--Parallax-->
	<div id="title" class="slide header">
  			<h2>More Information</h2>
		</div>

		<div id="slide1" class="slide">
			<div class="title">
				<h2>The Event</h2>
				<p>This rave event is for all ages over the age of 18 all over the world. This event is brought to you by Polokwane Events. For the purpose  to raise funds for the educate homeless and disabled kids in Limpopo.</p>
			</div>	
			<img id="img2" src="https://lorempixel.com/640/480/abstract/6/">
			<img id="img2" src="https://lorempixel.com/640/480/abstract/6/">
		</div>

		<div id="slide2" class="slide">
			<div class="title">
				<h2>Venue</h2>
				<p>The rave will be held from 30 March 2018 till 01 may 2018 at Peter Mokaba Stadium. There is a VIP area with Smoking area, Bar, Food and Bathrooms. A Merch store, Food, Bar, Bathrooms, ATM and First Aid area will also be availible in public areas. </p>
			</div>
			<img id="img1" src="https://lorempixel.com/640/480/abstract/6/">
			<img id="img1" src="https://lorempixel.com/640/480/abstract/6/">
		</div>

		<div id="slide3" class="slide">
		  <div class="title">
			<h2>Entertainment</h2>
			<p>Famous DJ's local and from all over the world will be performing at the venue over the coarse of three days. DJ's such as Alen Walker, David Guetta, Martin Garrix, Afrojack, Tiësto, Skrillex, Avicii, Hardwell, Paul van Dyk, Zed, Axwell and much much more....</p>
		  </div>
			<img id="img2" src="https://lorempixel.com/640/480/abstract/6/">
			<img id="img2" src="https://lorempixel.com/640/480/abstract/6/">
		</div>

		<div id="slide4" class="slide header">
			<h2>Come and be part of the greatest Event 
			EVER!!!!!</h2>
			<footer>
			<!--Copyright and links-->
				<p><span style="color: #BBBBBB">
					&copy; 2018 Danie Nortje
					&nbsp;&nbsp;&nbsp;&nbsp;
					Design by </span><span style="color: #fff" <a href="#openModal">Danie Nortje</a> 
							<a href="http://www.cssportal.com/">CSS Portal </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="index.html">Home</a> |
							<a href="#" onclick="document.getElementById('id01').style.display='block'">Sitemap</a> |
							<a href="#" onClick="alert('This should link to RSS Feed when clicked')">RSS Feed</a> |
							<a href="#" onClick="alert('This should link to HTML5 TERMS OF USE when clicked')">HTML5</a> |
							<a href="#" onClick="alert('This should link to CSS3 TERMS OF USE when clicked')">CSS3</a>
					</span>
				</p>
			</footer>
		</div>
	
	
</body>

</html>

`

2 个答案:

答案 0 :(得分：0)

试试这个。将导航位置更改为粘性。

Traceback (most recent call last): File "answer_bot.py", line 284, in <module> 
load_json() File "answer_bot.py", line 64, in load_json sample_questions = 
json.loads(open("Data/questions.json").read()) File 
"C:\Users\Phili\AppData\Local\Programs\Python\Python36-32\lib\encodings\cp1252.py", line 23, in decode return codecs.charmap_decode(input,self.errors,decoding_table)[0] UnicodeDecodeError: 
'charmap' codec can't decode byte 0x9d in position 94: character maps to 
<undefined>

答案 1 :(得分：0)

尝试一下，我最终发现了如何在同一页面上获得视差和粘性导航条

#navbar{
position: fixed;
right: 0;
left: 0;
z-index: 1;
height:200px;
}
相关问题
最新问题