Well this topic might seem quite silly. How do I know where I am on my page, well surely you just look and see, well yes but how does the browser know where you are. We use multiple browsers and screensizes and resolutions, so what is the best way for the browser to know where you are to act according.
So you are asking – why would this be helpful. Lets think about an example. The Sticky menu, specifically in SharePoint your page is broken into the following components:
- The Suite Bar
- The top Ribbon
- The workspace
- The titlebar
- The global navigation
- The body
So what happens if I want a sticky navigation, I need to know where I am in my scroll to understand when to move the item in (5) to the top, which I can do through CSS. However we hit some complexities. This would be quite easy to do with basic javascript, binding to the scroll event of the window. However in the SharePoint context the page is actually not scrollable, only a portion of the page (the workspace) is actually scrolling, as such your window binding event doesn’t work.
Well a littel bit of searching and I found the most amazing JQuery library called Waypoints from rather secretive Caleb (if you wondering what I am talking about check out his blog and twitter feed – I like this guys) at “I make Web things” – http://imakewebthings.com/waypoints/.
Basically what this library lets you do is monitor when you scroll passed an element on the page.
<br></br>
var waypoints = $('#menuH').waypoint({<br></br>
handler: function() {<br></br>
console.log(this.element.id + ' just hit the menu')<br></br>
}<br></br>
})<br></br>```
I implemented it and…. same problem as before, it didnt pick up the scroll, until I read further in the API. There is a contextual setting, so rather than monitoring the page scroll you monitor the element in context of where it sits in the page.
var waypoints = $('#menuH').waypoint({
handler: function() {
console.log(this.element.id + ' just hit the menu')
},
context: '#s4-workspace'
})
```
Boom, how awesome is that, 5 lines of code to start tracking when you have passed a waypoint. So now when we pass the waypoint we can start adjusting the css at runtime. But Wait – like any infomercial it gets better. Its great to change the css when we scroll DOWN, but what about when we scroll UP. If you subscribe now you also get DIRECTION for free. So my final code looked something like this
<br></br>
<style><br></br>
.Fixed{<br></br>
position:fixed !important;<br></br>
top:50px;<br></br>
}<br></br>
</style><br></br>```
var waypoints = $('#menuH').waypoint({
handler: function(direction) {
direction == 'down' ? $("menuH).addClass('Fixed') : $("menuH).removeClass('Fixed')
},
context: '#s4-workspace'
})
```
This is fantastic. I am gonna find new uses of this and the library where-ever I can :). Don’t forget if you want to find out about our A-team services to click the link below, we will get hold of you!