javascript - Automatically Highlight Navigation Links on Horizontal Free Scrolling Website -
i have particular page set of images contained in white-space:nowrap
div, page scrolls horizontally. there's fixed (main) navigation menu on left.
i have second navigation set, underneath images, when click on various links uses scrollto
scroll browser relevant image. second navigation menu contained in fixed div , made of series of links various anchors associated images.
i way of attaching , removing active class these links (i.e. addclass()
) depending on browser window (and in view).
i have found lots of vertical versions of this, js knowledge isn't fantastic , haven't been able convert these used horizontally.
essentially horizontal version of jsfiddle.
i have come across plugin, haven't managed work me either: here
thank you!
this fiddle horizontal:
i made little change on html, , here js:
$(function(){ var sections = {}, _width = $(window).width(), = 0; // grab positions of our sections $('.section').each(function(){ sections[this.name] = $(this).offset().left; }); $(document).scroll(function(){ var $this = $(this), pos = $this.scrollleft(); for(i in sections){ if(sections[i] >= pos && sections[i] <= pos + _width){ $('a').removeclass('active'); $('#nav_' + i).addclass('active'); } } }); });
Comments
Post a Comment