Problem
I'm trying to make a carousel, so when a person clicks the back arrow the page .animate and scrolls back up to the previous chapter in the story. However, after this happens the page appear to get stuck and I can't scroll anymore. I'm wondering why this is happening?
Update #2 - JSFiddle updated: http://ift.tt/1H1tZwF
$(function(){
/* -------------------------------------
GLOBAL VARIABLES
--------------------------------------*/
var nav = 72.5;
var splash = 750 + nav;
var one = $(".one").offset().top - nav;
var two = $(".two").offset().top - nav;
var three = $(".three").offset().top - nav;
var four = $(".four").offset().top - nav;
var five = $(".five").offset().top - nav;
/* -------------------------------------
PROGRESS BAR
--------------------------------------*/
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scroll / (documentHeight - windowHeight)) * 100;
var position = scrollPercent;
$("progress").attr("value", position);
/* -------------------------------------
CHAPTER TEXT SWITCHING
--------------------------------------*/
if (scroll >= one && scroll <= two) {
$(".title").html("Chapter 1");
} else if (scroll >= two && scroll <= three) {
$(".title").html("Chapter 2");
} else if (scroll >= three && scroll <= four) {
$(".title").html("Chapter 3");
} else if (scroll >= four && scroll <= five) {
$(".title").html("Chapter 4");
} else if (scroll >= five) {
$(".title").html("Chapter 5");
} else {
$(".title").html('It could have been me');
};
/* -------------------------------------
ARROW CAROUSEL
--------------------------------------*/
$(".backward").click(function(){
if (scroll >= two && scroll <= three) {
$("body").animate({
scrollTop: $(".one").offset().top - splash
}, 1000);
} else {
console.log("Backward");
// $("html, body").animate({
// scrollTop: $(".two").offset().top
// }, 1000);
}
});
$(".forward").click(function(){
console.log("Forward");
});
})
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="http://ift.tt/18QXBAt">
<link href='http://ift.tt/YW5hLg' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav>
<progress value="0" max="100"></progress><!-- /.progress -->
<div class="logo">
<img src="assets/img/logo.png" alt="" class="bdnsun">
</div><!-- .logo -->
<div class="details">
<p class="title">'It could have been me'</p>
<span class="dot first">●</span>
<span class="by">By</span>
<span class="byline">Nancy MacDonald</span>
<span class="dot second">●</span>
<span class="time">Time to Read:</span>
<span class="full">19 min</span>
</div><!-- .details -->
<div class="social">
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div><!-- .social -->
<div class="chapters">
<div class="backward" id="target" title="Previous chapter"><i class="fa fa-angle-left fa-4x"></i></div><!-- /.backward -->
<div class="forward" title="Next chapter"><i class="fa fa-angle-right fa-4x"></i></div><!-- /.forward -->
</div><!-- .chapters -->
</nav>
<main>
<div class="splash" id="top">
<div class="teaser">
<h1>'It could have been me'</h1>
<p class="subhead">Thirteen women share their remarkable stories</p>
<p class="byline-alt">Nancy MacDonald</p>
</div><!-- .splash -->
</div>
<div class="wrapper">
<div class="chapter one">
<p>Wolf kale chips stumptown fanny pack, vegan kogi asymmetrical. Locavore polaroid sustainable Blue Bottle, farm-to-table kogi plaid keytar Tumblr occupy gluten-free. Pitchfork shabby chic lo-fi flannel, bitters hella readymade. Ethical meggings master cleanse Schlitz mustache Blue Bottle, <span class="highlight">American Apparel</span> dreamcatcher vinyl Tumblr. Scenester try-hard Portland master cleanse. Skateboard tofu mumblecore, swag retro aesthetic kale chips American Apparel lo-fi normcore bespoke Helvetica synth. Tousled Brooklyn DIY, quinoa Etsy chambray umami.</p>
<p>Meh literally freegan, church-key Tumblr sustainable mlkshk sriracha Pitchfork. Migas stumptown deep v lumbersexual. Cray roof party skateboard scenester hashtag, plaid distillery wayfarers banjo ethical artisan. Skateboard irony Portland deep v, cliche DIY Pinterest brunch Echo Park tilde Helvetica. Etsy stumptown chambray craft beer four loko brunch, twee mustache. Crucifix yr synth, irony mlkshk polaroid master cleanse iPhone mixtape twee direct trade keytar. Brooklyn Pinterest migas Portland gluten-free.</p>
<blockquote>
<span class="quote">“</span>
Meh literally freegan, church-key Tumblr sustainable mlkshk sriracha Pitchfork. Migas stumptown deep v lumbersexual.
</blockquote>
<p>Blog cold-pressed vinyl Shoreditch organic put a bird on it. Salvia put a bird on it swag chillwave Bushwick, fanny pack stumptown art party selvage narwhal. Readymade distillery asymmetrical bespoke. Blue Bottle bitters tofu, Austin retro meh gentrify tattooed American Apparel Banksy. Try-hard whatever pug tousled DIY lomo. Marfa pop-up shabby chic messenger bag Intelligentsia. Kale chips gastropub viral, Helvetica forage disrupt mumblecore mlkshk Brooklyn vegan.</p>
</div><!-- .chapter -->
<div class="chapter two">
<p>Chapter 2</p>
</div><!-- .chapter -->
<div class="chapter three">
<p>Chapter 3</p>
</div><!-- .chapter -->
<div class="chapter four">
<p>Chapter 4</p>
</div><!-- .chapter -->
<div class="chapter five">
<p>Chapter 5</p>
</div><!-- .chapter -->
</div><!-- /.wrapper -->
</main>
<p class="more">Read More</p>
<footer>
</footer>
<script src="http://ift.tt/1JsU1tb"></script>
<script src="http://ift.tt/1CWMYDx"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire