How to make sticky navbar

1

I want to make navbar on bottom and when you scroll down it goes to top.
something like this http://www.bootply.com/107973

where to add this javascript in roots theme

$(’#nav’).affix({
offset: {
top: $(‘header’).height()
}
});

2 Likes
2

Ideally you add this to your _main.js and then run grunt.

1 Like
3

Hi, so I added sticky navbar there. http://projects.qbf.ie/sticky-navbar/ but when i go down the navbar just jumps on top. want it smooth moving from bottom to top. like here . http://www.dittodc.com/ . THANKS!

4

i think the problem is in the offset. from what i can understand you are using the header height as the offset. but you should be using the slider height or just enter the height. the offset is the number of px to scroll before the affix kicks in. checkout bootstrap docs for the affix: http://getbootstrap.com/javascript/#affix. btw you can also use data attributes to add the affix to an element.

5

thanks slobich. working. but one more thing how to make movable slider down with menu. as in http://www.dittodc.com/

my is static. thanks

6

this is actually not the right place to ask this kind of questions as the forum is for stuff that is roots/bedrock related. sorry… don’t want to be rude but it’s the law of the land. hope you understand. it’s best to ask these questions over on http://stackoverflow.com/. but i’ll try to point you in the right direction.

first of i don’t quite understand what you mean by: [quote=“lewix66, post:5, topic:1605”]
how to make movable slider down with menu
[/quote]

if you mean the small parallax effect on she slider than you need a parallax plugin like this one: https://github.com/Prinzhorn/skrollr. if you are referring to the arrow link in slider that makes the site slide down, you need an anchor link that points to an element where you want it to go and some js to make it smooth (similar like the link you have in the footer in your example that scrolls the site to the top).

don’t know if this helps.

1 Like
7

@lewix​66 - would you mind sharing your code? We are looking to do the same thing.

@slobich - Agreed, and excuse me for continuing the tread but it would be nice to finish with a solution everyone can benefit from.