My Playground

How to change bootstrap scrollspy offset

Asif Nawaz

Writen on May 2, 2014

Category: web development

Its a case study actually, I was stuck to change the scrollspy offset, however there are some dirty and fair way to set this value. Question is why I need this. If you use fixed position navigation or change the scroll  offset then you will see the navigation items inn’t highlighting perfectly, generally the problem is always the exact previous item being highlighted after reaching the content. I saw a topic here but wasn’t satisfied actually.

 

I did this first

You can also open bootstap-offset.js and modify

 

That means editing the core files, this is not the fair way you know. at the end I got a fair solution, I got the hints in bootstrap documentation the hint is.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name type default description
offset number 10 Pixels to offset from top when calculating position of scroll.

 

Generally in the body we put the data attribute data-spy=”scroll” now you just need to put a new data attribute data-offset=”80″ and change the value to adjust with your scrolling position.

 

And thats it 😀

 

 

Some more boostrap Tips and Tricks