Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Aiheen aloitti: Petter B - helmikuu 22, 2014, 08:02:17 AP

Otsikko: Fixing breadcrumbs at top of page.
Kirjoitti: Petter B - helmikuu 22, 2014, 08:02:17 AP
I would like to make the breadcrumbs staying fixed at the top when scrolling, like this: http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/ (http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/)

There is a good tutorial for the example here: http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/ (http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/)
But I do not know:

:-[
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Dzonny - helmikuu 22, 2014, 09:36:12 AP
Heya there! :)

1. I'm not really sure what you're asking here. You'd need to have "nav-container" and "nav" classes in CSS (if you're about to use class names provided on links from your post).
2. You can put it in index.template.php file, but use this code as the one that's in the tutorial will cause syntax error:

jQuery("document").ready(function($){

var nav = $(\".nav-container\");

$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});

});

You can just include that with script tags in index.template, or if you'd like you can write that to some external js file and include that file in template.

3. I would use google provided file myself, but if you want you can also download it and save it wherever you want on your server, and then include it in template.
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Petter B - helmikuu 26, 2014, 03:24:28 AP
Thanks  :)

I did not understand this:
Lainaus käyttäjältä: Dzonny - helmikuu 22, 2014, 09:36:12 AP
3. I would use google provided file myself...

Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Dzonny - helmikuu 26, 2014, 06:52:49 AP
Lainaus käyttäjältä: Petter B - helmikuu 26, 2014, 03:24:28 AP
Thanks  :)

I did not understand this:
Lainaus käyttäjältä: Dzonny - helmikuu 22, 2014, 09:36:12 AP
3. I would use google provided file myself...


http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
you can use script tag to include it on page: http://www.w3schools.com/tags/att_script_src.asp
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Petter B - helmikuu 27, 2014, 01:38:58 AP
Thanks again  :)
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Neo_TE - maaliskuu 01, 2014, 06:15:38 IP
The problem with jquery is that if javascript is disabled in the browser or some script blockers are used then it won't work. You should use pure CSS.

I made a theme, http://www.simplemachines.org/community/index.php?topic=518818.0 with fixed navbar using pure CSS, you may check the code to get an idea of implementing it in your site. :)
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Petter B - maaliskuu 01, 2014, 06:27:10 IP
Interesting, is it possible to make the breadcrumbs stay at the top when scrolling down, but not being there at the beginning? Like in the demo in the first post.

Is there a demo for your theme?
Otsikko: Re: Fixing breadcrumbs at top of page.
Kirjoitti: Neo_TE - maaliskuu 01, 2014, 06:30:51 IP
That's possible only with jquery.

And sorry, no demo as of now.