jquery - autoscroll is skipping menu items -
i'm using bootstrap 3, autoscroll plugin. autoscroll skipping on menu items, , selecting wrong 1 @ wrong time. i.e. scroll section 3 , section 2 highlighted on menu.
here's code:
html
<div class="navbar navbar-fixed-top alt" data-spy="affix" data-offset-top="1000"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="navbar-collapse collapse" id="navbar"> <ul class="nav navbar-nav"> <li><a href="#sec0">home</a></li> <li><a href="#sec1">gear</a></li> <li><a href="#sec2">amenities</a></li> <li><a href="#sec3">artists</a></li> <li><a href="#sec4">studios</a></li> <li><a href="#sec5">about</a></li> <li><a href="#sec6">contact</a></li> </ul> </div> </div> </div> <div class="header alt vert" id="sec0"> <div class="container"> <div class="row"> <div class="col-lg-4"> </div> <div class="col-lg-4 col-md-4 col-sm-4 logo"> <img class="img-responsive" src="img/logo7.png"> </div> <div class="col-lg-4"> </div> </div> <div class="row"> <div class="col-lg-4"> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <h4 class="tagline">dedicated sound</h4> <div> </div> <a href="#" class="btn btn-default btn-lg">visit today!</a> </div> <div class="col-lg-4"> </div> </div> </div> </div> <hr> <div id="sec1" class="blurb"> <div class="container"> <div class="row"> <div class="col-md-7"> <h1>state of art equipment</h1> <p class="lead">at willow studios, work best gear available.</p> </div> <div class="col-md-5"> <a href="#" class="btn btn-warning btn-lg blurb-button">view our gear list</a> </div> </div> </div> </div> <hr> <div class="featurette" id="sec2"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>amazing amenities</h1> </div> </div> <div class="row"> <div class="col-md-2 col-md-offset-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/lounge.png"> <h4>socialize</h4> <p>kick feet in our spacious lounge</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/wifi.png"> <h4>connect</h4> <p>free wifi throughout facilities</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/cabin.png"> <h4>rest</h4> <p>stay @ our cabin; accommodates eight</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/firepit.png"> <h4>warm up</h4> <p>take in heat our beautiful fire pit</p> </div> </div> </div> </div> </div> <div class="callout" id="sec3"> <div class="vert"> <div class="col-md-12 text-center"><h2 class="bg-transparent">artists / clients</h2></div> <div class="col-md-12 text-center"> </div> <div class="col-md-8 col-md-offset-2 text-center"> <div class="row hidden-xs"> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/5c708a2c9d25d1f2e4195ece1f1c684d?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/3bb38f66f79ca138f318af89fe6b02ec?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/3423a3e32fda92a5aaed72c7cde3849c?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/325b6c3c0a75bfdb72822035bb556826?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/cdd69340b0cfac4c7acb892e3ea7556e?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> <div class="col-sm-2 bg-transparent spacing-top spacing-bottom"> <img class="img-circle grayscale" src="http://www.gravatar.com/avatar/889778901fb1522dac2846ffe62bd960?s=80"> <p>recording @ willow studios dream!</p> <a href="#" class="btn btn-danger">read more</a> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center spacing-top"> <a href="#" class="btn btn-default">read reviews</a> </div> </div> </div> </div> </div> ... , on <ul class="nav pull-right scroll-down"> <li><a href="#" title="scroll down"><i class="icon-chevron-down icon-3x"></i></a></li> </ul> <ul class="nav pull-right scroll-top"> <li><a href="#" title="scroll top"><i class="icon-chevron-up icon-3x"></i></a>/li> </ul> jquery:
/* smooth scrolling scroll top */ $('.scroll-top').click(function(){ $('body,html').animate({scrolltop:0},800); }) /* smooth scrolling scroll down */ $('.scroll-down').click(function(){ $('body,html').animate({scrolltop:$(window).scrolltop()+800},1000); }) /* highlight top nav scrolling occurs */ $('body').scrollspy({ target: '#navbar' }) any appreciated, , thank time. fiddle: http://jsfiddle.net/lmztg/
first, captured scroll event before animating page, make sure menu items being highlighted @ right time. also, added 5 pixels incrementation of scroller, take account header rows between of sections. changed jquery code this:
jquery:
/* highlight top nav scrolling occurs */ $('body').scrollspy({ target: '#navbar' }) /* smooth scrolling scroll top */ $('.scroll-top').click(function(){ $('body,html').animate({scrolltop:0},805); }) /* smooth scrolling scroll down */ $('.scroll-down').click(function(){ $('body,html').animate({scrolltop:$(window).scrolltop()+805},1000); }) then, changed every section's div 800 pixels high (to match increment of scroller), through css height property.
html/css snipet:
<div id="sec1" class="blurb" style="height: 800px;"> <div class="container"> <div class="row"> <div class="col-md-7"> <h1>state of art equipment</h1> <p class="lead">at willow studios, work best gear available.</p> </div> <div class="col-md-5"> <a href="#" class="btn btn-warning btn-lg blurb-button">view our gear list</a> </div> </div> </div> </div> <hr> <div class="featurette" id="sec2" style="height: 800px;"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>amazing amenities</h1> </div> </div> <div class="row"> <div class="col-md-2 col-md-offset-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/lounge.png"> <h4>socialize</h4> <p>kick feet in our spacious lounge</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/wifi.png"> <h4>connect</h4> <p>free wifi throughout facilities</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/cabin.png"> <h4>rest</h4> <p>stay @ our cabin; accommodates eight</p> </div> </div> <div class="col-md-2 text-center"> <div class="featurette-item"> <img class="img-circle" src="img/firepit.png"> <h4>warm up</h4> <p>take in heat our beautiful fire pit</p> </div> </div> </div> </div> </div> and that. works now, although tradeoff accommodating tallest section leaves of sections seeming bare - little content. it's tradeoff: more content, or no autoscroll option user.
Comments
Post a Comment