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
reactjs
domain-driven-design
weblogic
xamarin.forms
mailchimp
terminal
samsung-gear-s2
ng2-charts
eclipse-orion
github-flavored-markdown
reportlab
samba
powerpivot
cucumberjs
gpo
restructuredtext
turn.js
multipart
klipfolio
fastboot
ithit-webdav-server
aws-certificate-manager
typeorm
wordpress-rest-api
slim-lang
storefront
aweber
origami
linkurious
usernotifications
google-chrome-console
wicket-tester
delphi-xe
java-5
python-venv
angular-fullstack
google-chrome-storage
google-cloud-shell
riemann
perldoc
playframework-2.3
photoshop-script
r-commander
lattice
stripes
distcc
consolidation
recurring
patching
avaudiorecorder
calc
markerspiderfier
google-finance-api
cascading
encode
computability
skscene
properties-file
veeam
wingdb
numerical-recipes
shunting-yard
nsq
jsonschema2pojo
lwuit
pnunit
step
dateadd
email-headers
svg-android
randomaccessfile
8-puzzle
cab
codeigniter-form-helper
nx
system.transactions
urlfetch
qt5.1
netbiscuits
blackberry-eclipse-plugin
nude.js
stl-algorithm
project-files
yii-cactiverecord
file-processing
service-layer
auto-compile
datarelation
hp-trim
appointment
dynamic-scope
j++
asp.net-1.1

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