javascript - Making carousel, can't scroll after click function animates (JSFiddle link updated) -
problem
i'm trying make carousel, when person clicks arrow page .animate , scrolls previous chapter in story. however, after happens page appear stuck , can't scroll anymore. i'm wondering why happening?
update #2 - jsfiddle updated: http://jsfiddle.net/vzt2s4b5/4/
$(function(){ /* ------------------------------------- global variables --------------------------------------*/ var nav = 72.5; var splash = 750 + nav; var 1 = $(".one").offset().top - nav; var 2 = $(".two").offset().top - nav; var 3 = $(".three").offset().top - nav; var 4 = $(".four").offset().top - nav; var 5 = $(".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 >= 1 && scroll <= two) { $(".title").html("chapter 1"); } else if (scroll >= 2 && scroll <= three) { $(".title").html("chapter 2"); } else if (scroll >= 3 && scroll <= four) { $(".title").html("chapter 3"); } else if (scroll >= 4 && scroll <= five) { $(".title").html("chapter 4"); } else if (scroll >= five) { $(".title").html("chapter 5"); } else { $(".title").html('it have been me'); }; /* ------------------------------------- arrow carousel --------------------------------------*/ $(".backward").click(function(){ if (scroll >= 2 && 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://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=lato:300,400,700' 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 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 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 have been me'</h1> <p class="subhead">thirteen women share 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 4 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 bird on it. salvia put bird on 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> <script src="assets/js/scripts.js"></script> </body> </html>
i can see create click handlers inside scroll handler. means can't click until have scrolled once (when handlers created). means have created new click handler every time scroll, click handling code gets called multiple times. if scrolled lot getting stuck on calls.
try pulling handlers outside of scroll method.
edit: here updated fiddle: http://jsfiddle.net/brendaz/z03dm3pl/. if chapters given class "chapter-" + chapterid, can refer current chapter number. rid of if statements , neaten code:
function getcurrentchapter() { var scroll = $(window).scrolltop(); var currentchapter = 1; while (currentchapter < num_chapters && scroll>=math.floor($(".chapter-"+(currentchapter+1)).offset().top-nav)) { currentchapter++; } return currentchapter; }
Comments
Post a Comment