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
python-requests
c++builder
highmaps
crm
pandoc
artifactory
download
pip
android-webview
simd
airbnb
legend-properties
sonarlint
serenity-js
multipart
infinite-loop
apdu
grunt-contrib-uglify
knapsack-problem
boosting
dynamic-memory-allocation
checkmarx
meteor-accounts
sphinx4
paper-trail-gem
lines
ng2-bootstrap
choco
epub
traitsui
machine-code
geocomplete
client-server
rtsp
yelp
var
usernotifications
ssdp
jquery-ui-slider
result
amazon-fire-tv
opos
blackberry
turbolinks
boost-range
jira-agile
disconnect
geokit
camellia
jcalendar
nonblocking
random-sample
php-gd
adempiere
dnvm
avrcp
web-standards
teamwork
valdr-bean-validation
veeam
beagleboard
iphone-6
system.io.packaging
qf-test
formbuilder
nsmutableurlrequest
oxygenxml
triplestore
sqldatasource
power-management
xtify
misfire-instruction
mobile-robots
angularjs-select2
libx264
yii-components
aspmenu-control
event-propagation
dancer
erlide
bash4
facebook-winjs-sdk
maven-eclipse-plugin
scriptmanager
yii-cactiverecord
rjs
flexbuilder
cpack
marathontesting
oaw
file-storage
rpxnow
ffdshow
scalable

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