Floating Sidebar Links

[kumaryadav966]

Hi, i want to make sidebar links on my website as floating links, i mean whenever i scroll down the page the links should also float
example site: http://goo.gl/X9eZ3E
in the above website , below the image of mobile there are some links like specifications, reviews, media, related etc., so my requirement is they should float whenever i scroll down..
Thanks

[dyr]

This is fairly easy using JavaScript. If you’re looking for a purely CSS solution then you’ll need to use ‘position: fixed’ which will pin those links within the viewport.

In order to make the links “sticky” only once they’ve reached the top of the page as a user scrolls, you’ll need to compare the page scroll position with the top offset of the links container. If the page has scrolled past the position of the links you’ll add a class such as ‘sticky-links’ and if the page scrolls back up past that point you’ll remove the class.

http://codepen.io/shawkdsn/pen/Aypqg

Note: I’ve artificially made the body tall to ensure scrolling for testing the effect. I also applied a gradient so you could visually see scrolling happening. I’ve also positioned the box of links somewhere down the page so we can see it scroll up and snap to the top. Another concern you may want to consider is what happens near the bottom of the page; does the box snap to some element at the bottom? or perhaps it just floats over the footer and any other info.

Also note: in the sample code I provided I declared that when the links are stuck to the top of the screen there should be a 50px gap between the top of the screen and the box of links. This is the top: 50px property on the .sticky-links class. In javascript where we’re comparing the pageOffset to the linkContainerOffset, we need to factor in this extra space so we do if (pageOffset > linkContainerOffset-50) { // stick it }. If you wanted a different sized gap you’d need to adjust that value in both places (CSS and JS.)

Cheers~

[kumaryadav966]

Thanks for your quick reply, you read my mind. But i can’t make it to work exactly
,below is the css stylesheet of links, used default by the plugin

.gdpc-side ul.gdpc-links {
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #999999;
padding: 10px;
list-style: none;
margin-bottom: 10px;
}

The floating links should start after image. Thanks

[dyr]

Do you want the image pinned as well? The code I provided could be used to pin anything to the top of the page. You just need to target some element that contains everything you want pinned.

In order for position: fixed to work you need to make sure the body element or another parent element has position: relative or position:absolute set.

In addition the link container which is being pinned to the top of the page needs to be position: relative or position: absolute when it is not pinned and position: fixed when it is pinned.

Can you provide a PEN or some more of your code and describe what you’ve tried and what isn’t working?

Cheers

[Author]

Posts