我的问题与此问题有关parallax menu scrolling
我正在尝试同样的事情。
但是，由于某些问题，它不起作用。我想我选的是错误的身份和班级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNAPCHAT</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/scrip.js"></script>
<script src="js/jquery.nicescroll.js"></script>
</head>
<body>
<a id="#nav1"></a>
<a id="#nav2"></a>
<a id="#nav3"></a>
<a id="#nav4"></a>
<a href="#" class="back-to-top">Back to Top</a>
<div id="nav">
<!-- <div id="logo"><img src=""></div> -->
<ul>
<li><a href="http://mediacentral.ie/" class="nav-icon" title="Home">Home</span></a></li>
<li><a href="#nav1">Sponsored Snapchat</a></li>
<li><a href="#nav2">Snapchat Content</a></li>
<li><a href="#nav3">Display Ads</a></li>
<li><a href="#nav4">Media Central</a></li>
</ul>
</div id="main">
<div id="#nav1" class="image" data-stellar-background-ratio="0.5" >
<!-- <div id="content_1" class="content1">
-->
</div>
</div>
</div>
<div id="#nav2" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content2">
-->
</div>
<div id="#nav3" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content3">
-->
</div>
<div id="#nav4" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content4">
-->
</div>
<script type="text/javascript">
// create the back to top button
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
</body>
</html>
这是我的css
body{
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
background-color: #fffc00;
}
.image {
height: 750px;
width: 100%;
/*background: #55e6c5;*/
}
.content {
height: 750px;
width:100%;
/* background: white;*/
z-index: 2;
}
.content h1 {
font-size: 40px;
color: #464646;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
margin: 30px 60px;
}
.content p {
font-size:20px;
color: #343434;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 30px 60px;
}
#nav1 {
background: url(../images/bg1.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav2 {
background: url(../images/bg2.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav3 {
background: url(../images/bg3.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav4 {
background: url(../Images/bg4.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px 80px 0 80px ;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav {
height: 70px;
width: 100%;
position: fixed;
top:5px;
left:0;
background: #00000;
z-index: 100;
}
a[id= "#nav1"]:target ~ #main div.image {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "#nav2"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav3"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav4"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
/*#nav #logo {
height: 50px;
width: 50px;
position: relative;
top: 0;
bottom:0;
margin: auto 100px;
text-align: left;
}*/
#nav #logo img {
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.6;
filter: alpha(opacity=60)
}
li {
float: left;
padding-left:80px;
}
li a {
display: inline-block;
color: #fffc00;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #fff;
}
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #333 url("../images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/*#content_1 {position: relative;}*/
请帮帮我。
答案 0 :(得分：0)
在定义id属性时，不要使用#，只有在href或css选择器中引用它时才使用id。并且只对单个元素使用相同的a。因此，请删除body开头的<div id="#nav1">
<a href="nav1">
元素，因为您稍后会使用相同的ID。
这将不工作。
<div id="nav1">
<a href="#nav1">
将工作：
{{1}}