所以，看到这个问题的最好方法是让我发布代码。 我不完全确定我哪里出错了，我一直在搜索和搜索，但除非我使浏览器变小，否则我似乎无法让它显示出来。所以在手机上，它看起来很好，但在浏览器上，它不显示最后一个注册部分。当它在移动版本/大小中时，最后一个注册区域没有居中，我也想不通
skrollr.init({
forceHeight: false
});
/*!
* Plugin for skrollr.
* This plugin makes hashlinks scroll nicely to their target position.
*
* Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr
*
* Free to use under terms of MIT license
*/
(function(document, window) {
'use strict';
var DEFAULT_DURATION = 500;
var DEFAULT_EASING = 'sqrt';
var MENU_TOP_ATTR = 'data-menu-top';
var MENU_OFFSET_ATTR = 'data-menu-offset';
var skrollr = window.skrollr;
var history = window.history;
var supportsHistory = !!history.pushState;
/*
Since we are using event bubbling, the element that has been clicked
might not acutally be the link but a child.
*/
var findParentLink = function(element) {
//Yay, it's a link!
if (element.tagName === 'A') {
return element;
}
//We reached the top, no link found.
if (element === document) {
return false;
}
//Maybe the parent is a link.
return findParentLink(element.parentNode);
};
/*
Handle the click event on the document.
*/
var handleClick = function(e) {
//Only handle left click.
if ((e.which || e.button) !== 1) {
return;
}
var link = findParentLink(e.target);
//The click did not happen inside a link.
if (!link) {
return;
}
if (handleLink(link)) {
e.preventDefault();
}
};
/*
Handles the click on a link. May be called without an actual click event.
When the fake flag is set, the link won't change the url and the position won't be animated.
*/
var handleLink = function(link, fake) {
//Don't use the href property (link.href) because it contains the absolute url.
var href = link.getAttribute('href');
//Check if it's a hashlink.
if (!/^#/.test(href)) {
return false;
}
//Now get the targetTop to scroll to.
var targetTop;
//If there's a data-menu-top attribute, it overrides the actuall anchor offset.
var menuTop = link.getAttribute(MENU_TOP_ATTR);
if (menuTop !== null) {
targetTop = +menuTop;
} else {
var scrollTarget = document.getElementById(href.substr(1));
//Ignore the click if no target is found.
if (!scrollTarget) {
return false;
}
targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');
var menuOffset = scrollTarget.getAttribute(MENU_OFFSET_ATTR);
if (menuOffset !== null) {
targetTop += +menuOffset;
}
}
if (supportsHistory && !fake) {
history.pushState({
top: targetTop
}, '', href);
}
//Now finally scroll there.
if (_animate && !fake) {
_skrollrInstance.animateTo(targetTop, {
duration: _duration(_skrollrInstance.getScrollTop(), targetTop),
easing: _easing
});
} else {
defer(function() {
_skrollrInstance.setScrollTop(targetTop);
});
}
return true;
};
var defer = function(fn) {
window.setTimeout(fn, 1);
};
/*
Global menu function accessible through window.skrollr.menu.init.
*/
skrollr.menu = {};
skrollr.menu.init = function(skrollrInstance, options) {
_skrollrInstance = skrollrInstance;
options = options || {};
_easing = options.easing || DEFAULT_EASING;
_animate = options.animate !== false;
_duration = options.duration || DEFAULT_DURATION;
if (typeof _duration === 'number') {
_duration = (function(duration) {
return function() {
return duration;
};
}(_duration));
}
//Use event bubbling and attach a single listener to the document.
skrollr.addEvent(document, 'click', handleClick);
if (supportsHistory) {
window.addEventListener('popstate', function(e) {
var state = e.state || {};
var top = state.top || 0;
defer(function() {
_skrollrInstance.setScrollTop(top);
});
}, false);
}
};
//Private reference to the initialized skrollr.
var _skrollrInstance;
var _easing;
var _duration;
var _animate;
//In case the page was opened with a hash, prevent jumping to it.
//http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page
defer(function() {
if (window.location.hash) {
window.scrollTo(0, 0);
if (document.querySelector) {
var link = document.querySelector('a[href="' + window.location.hash + '"]');
if (link) {
handleLink(link, true);
}
}
}
});
}(document, window));
var s = skrollr.init( /*other stuff*/ );
//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(s, {
//skrollr will smoothly animate to the new position using `animateTo`.
animate: true,
//The easing function to use.
easing: 'sqrt',
//How long the animation should take in ms.
duration: function(currentTop, targetTop) {
//By default, the duration is hardcoded at 500ms.
return 1000;
//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
//return Math.abs(currentTop - targetTop) * 10;
},
});
$(".icon-bookmark").click(function() {
$("#placemark").addClass("placemarked");
$(".icon-bookmark").addClass("pressed");
});@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Signika");
@import url("https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css");
@import url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
html {
font-family: 'Signika', sans-serif;
}
body {
background: #DDD7D1;
}
#map {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
height: 2000px;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/52524/NewYork2_bg.png");
}
.notPlacemarked {
visibility: hidden;
}
.placemarked {
visibility: visible;
height: 55px;
width: 55px;
position: relative;
top: 110px;
margin-left: 40%;
z-index: 100;
transition: width 1s, height 1s, transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
.container {
background: #00C993;
position: absolute;
display: block;
width: 100%;
height: 2050px;
color: white;
text-align: center;
min-width: 24px;
}
.section {
position: absolute;
display: block;
width: 100%;
color: white;
text-align: left;
}
#sect1 {
top: 400px;
}
#sect2 {
top: 1000px;
}
#sect3 {
top: 1500px;
}
#footer {
top: 2000px;
height: 50px;
text-align: center;
}
#twitter {
float: left;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#rocket {
float: right;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#hiddenIcon {
text-align: center;
visibility: hidden;
height: 0;
font-size: 5em;
}
.anchor {
height: 100px;
}
band2 h2 {
text-align: left;
}
.explanation {
min-width: 12.42em;
float: left;
width: 40%;
}
.explanation-right {
min-width: 12.42em;
float: left;
text-align: right;
padding-left: 5%;
width: 40%;
}
#phone {
background: #DDD7D1;
border-radius: 30px;
box-shadow: 0 0.5em 0 #BCB1A5;
padding: 50px 18px 50px 18px;
width: 20%;
min-width: 200px;
max-width: 400px;
margin-right: 5%;
float: left;
}
#screen {
background: #ffffff;
height: 300px;
overflow: hidden;
padding: 0;
position: relative;
min-width: 200px;
}
#topBar {
background: #00C993;
height: 10%;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: relative;
min-width: 100px;
}
#mc_embed_signup {
text-align: right;
background-color: #00C993;
}
#mce-EMAIL {
text-align: right;
width: auto;
height: 30px;
margin-bottom: 20px;
padding-right: 1em;
border-style: none;
outline: none;
}
#mce-EMAIL:focus {
outline: none;
}
#mc-embedded-subscribe {
border-style: none;
}
.icon-bookmark {
float: right;
}
.icon-bookmark:hover {
color: #FFC52F;
}
.pressed {
color: #FFC52F;
}
h1,
h3 {
font-family: 'Signika', sans-serif;
font-weight: 700;
text-align: center;
}
.container h1 {
font-size: 5em;
line-height: 1em;
/*margin-bottom: 1em;*/
}
a {
color: white;
}
.button {
background: #DDD7D1;
text-align: center;
padding: .5em 1em;
color: white;
font-weight: bold;
text-decoration: none;
box-shadow: 0 0.2em 0 #BCB1A5;
text-transform: uppercase;
letter-spacing: 0.1em;
/*transition cross-browser stuff*/
-webkit-transition: background 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: background 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: background 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: background 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
}
.button:hover {
background: #BCB1A5;
}
a.arrow {
color: white;
text-align: center;
font-size: 3em;
text-decoration: none;
padding-bottom: 30px;
/*transition cross-browser stuff*/
-webkit-transition: color 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: color 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: color 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: color 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
}
a.arrow:hover {
color: #FFC52F;
}
@media only screen and (min-width: 767px) {
body {
font-size: 1.125em; /* 18px / 16px */
}
.container {
background-size: 100%;
}
.container h1 {
font-size: 3.25em; /* 52 / 16 */
}
a.button {
padding: .75em 1.5em;
}
}
@media only screen and (max-width: 600px) {
.explanation {
float: none;
margin: auto;
text-align: center;
}
.explanation-right {
float: none;
margin: center;
text-align: center;
}
#sect1 {
top: 350px;
}
#phone {
visibility: hidden;
height: 0px;
width: 0px;
padding: 0;
margin: 0;
}
#map {
width: 0px;
height: 0px;
}
#sect2 {
top: 900px;
}
#rocket {
visibility: hidden;
}
#twitter {
visibility: hidden;
padding-left: 0em;
}
#hiddenIcon {
visibility: visible;
height: auto;
}
#mce-EMAIL {
text-align: center;
padding: 0;
float: none;
}
#mc_embed_signup {
text-align: center;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="container" id="skrollr-body" data-0="background-color:rgb(0,201,147);" data-400="background-color:rgb(74,173,255);" data-1000="background-color:rgb(74,173,255);" data-1300="background-color:rgb(0,201,147);">
<h1><i class="icon-circle-blank"></i></h1>
<h2>PoshFit</h2>
<p> it's coming to your smartphone </p>
<a class="arrow" href="#anchor1"><i class="icon-sort-down"></i></a>
<div class="section" id="sect1">
<div class="anchor" id="anchor1"></div>
<div id="hiddenIcon">
<i class="icon-mobile-phone"></i>
</div>
<div id="phone" data-0="margin-left: -20%; opacity:0" data-350="margin-left: 10%; opacity:1">
<div id="topBar">
<p>Press---> <i class="icon-bookmark"></i> </p>
</div>
<div id="screen">
<div id="map">
<img id="placemark" class="notPlacemarked" src="https://s.cdpn.io/52524/CircleMarkerTest3.png">
</div>
<!--/ map-->
</div>
<!--/ screen-->
</div>
<!--/ phone-->
<div class="explanation" data-300="opacity: 0" data-350="opacity: 1">
<h2>Right where you are</h2>
<p>Try on clothes from home. There's no need to travel all the way to the store to find the perfect outfit.</p>
<a class="arrow" href="#anchor2"><i class="icon-sort-down"></i></a>
</div>
<!--/ explanation-->
</div>
<!--/ sect1-->
<div class="section" id="sect2">
<div class="anchor" id="anchor2"></div>
<div id="hiddenIcon">
<i class="icon-twitter"></i>
</div>
<div id="twitter" data-600="margin-top: -20%; opacity: 0" data-1000="margin-top: 0; opacity:1">
<i class="icon-twitter"></i>
</div>
<div class="explanation" data-850=" opacity: 0" data-900=" opacity:1">
<h2>Follow @PoshFit on Twitter</h2>
<p>Keep up with the latest updates from PoshFit. </p>
<a class="arrow" href="#anchor3"><i class="icon-sort-down"></i></a>
</div>
<!--/ explanation-->
</div>
<!--sect2-->
<div class="section" id="sect3">
<div class="anchor" id="anchor3"></div>
<div id="hiddenIcon">
<i class="icon-rocket icon-rotate-180"></i>
<p></p>
</div>
<div class="explanation-right" data-1350=" opacity: 0" data-1400=" opacity:1">
<h2>It's almost here!</h2>
<p>Leave your email address for our beta newsletter.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="">
<!-- currently empty -->
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="me@example.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'me@example.com'" required>
<div><input type="submit" value="I want it!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<!--/ explanation-->
<div id="rocket" data-1100="margin-top:-300px; margin-right:0%; opacity: 0" data-1400="margin-top:50; margin-right:20%; opacity:1">
<i class="icon-rocket icon-rotate-180"></i>
</div>
<!--/ rocket-->
</div>
<!--sect2-->
<div class="section" id="footer">
<p><a href="https://twitter.com/PoshFit">@PoshFit</a></p>
</div>
</div>
<!--/ band-->在我看来，如果你改变你的data-1350，data-1400data-1050，data-1200它会在正确的时间完成，你的动画结束得太晚了。
很抱歉解决方案不佳，我仍在努力寻找更好的解决方案。