...

Maksym Zahray

front end developer & UI, UX Designer

Best implementation of Bootstraps Scroll Spy for animated scrolling and page location

Portfolio
About

Hello! My name is Maksym and i`m ready to fulfill your wishes in the field of front end.

Let me tell you about my skills. I've been learning html, css, js since I was 12, now I'm 17, which means 5 years of experience and practice. Prices for my services are not exorbitant.I am also not very high at php & databases, PhpMyAdmin, etc.

My code is clear and good. I mainly work on bootstrap framework.

I am happy with new orders for customers there, and I guarantee speed and responsibility from my side

Portfolio
more
Rating
How To
Offest a Fixed Navbar 
<body data-spy="scroll" data-target="#navbar-example" data-offset="70">
  ...
</body>
$('body').scrollspy({
  offset: offsetHeight /*A numeric representing pixel count*/
})
Ensure last #target scrolls to top

A common problem I see with scrollspy implementations is when the last navigation target doesn't navigation to the top of the screen. This causes issues for scrollspy as well as confusing the user if the target they clicked is half way down the page.

The problem is simple, the document isn't long enough to allow it to scroll to the top.

A simple solution is to dynamically add padding-bottom to the body via JQuery, which increases the height to the pixel perfect minimum. We need to do this both at render/page load and if the window is resized. The below code is a simplified and calculates the height of all sibling elements (after the target) to calculate


var height = $('#targetId').innerHeight()
var windowHeight = $(window).height()
var navHeight = $('nav.navbar').innerHeight()
var siblingHeight = $('#targetId').nextAll().innherHeight()

if(height < windowHeight)({
  $('body').css("padding-bottom", windowHeight-navHeight-height-siblingHeight + "px")
}
#standwithukraine