smooth-scrolling


One Page Scroll add Active class depending on scroll position


Hello I have a one page website which uses smooth scroll in the navigation I have also set up a function which applies the active class when the link is clicked and removes it from the otehr links but is there a way to add the active class to the correct link depending on where you are on the page e.g. if I scroll to energy saving section the main nav adds an active class to energy saving.
Here is my code I am using for the smooth scroll.
var smoothScroll = function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - $('.fd_PageHeader').height() - 40
}, 1000);
$('body').removeClass('navVisible navTransition');
return false;
}
}
});
};
DIY solution:
Register an onScroll listener and for each callback compare the current scroll position to the vertical position of the headings.
$(document).scroll(function(){ /* callback here */ });
The vertical scroll position may be retrieved using jQuery.scrollTop(). The topOffset of the headings (offset().top) needs to be combined with the current window height: $(window).height(); prior to comparing.
See a POC version here http://jsfiddle.net/b1bc7wbL/
Easy solution:
Use a third party module like http://getbootstrap.com/javascript/#scrollspy

Related Links

Smooth scroll function really slow
Instagram snapwidget stops the smoothscroll
Listview SmoothScrollToPosition control with buttons and change item background
So smooth scrolling like on this website
One Page Scroll add Active class depending on scroll position
Smooth-Div-Scroll and iPad

Categories

HOME
ftp
itunesconnect
stanford-nlp
alasql
abc
phantomjs
android-ndk
opengl-es
perl6
sugarcrm
kohana
spring-data-solr
fetch
dat.gui
web-worker
tag-cloud
ofbiz
orange
printf
conditional-formatting
project-structure
webgl-earth
turn.js
javaagents
advertising
ppp
aspxgridview
windowserror
priority-queue
stack-trace
restangular
federated
2checkout
choco
wercker
mootools
pymunk
flex3
realloc
framebuffer
mockserver
cowboy
directadmin
contenteditable
test-kitchen
qt-quick
runner
google-cloud-shell
standard-error
activesupport
richtext
papyrus
symantec
geokit
change-password
shtml
jde
radar-chart
paypal-subscriptions
bluetooth-lowenergy-4.2
sqldataadapter
dynamics-nav
biginsights
om
dnvm
musicbrainz
joomla3.3
dcg
tidesdk
veeam
nfa
strcpy
connection-timeout
mri
cl.exe
conkeror
powerpoint-2010
nsmutableurlrequest
ios-enterprise
scjp
switchpreference
amzi-prolog
episerver-7
sigma-grid-control
cvi
html5-filesystem
node-mongodb-native
carrier
boofcv
listpicker
stringstream
qt5.1
rfc822
configurationsection
hypertable
states
bindinglist
digg
peoplepicker
lightopenid
auto-compile
quazip
netbeans7.0
mysql-logic
pixel-bender
qlibrary
vista64

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App