Uutiset:

Wondering if this will always be free?  See why free is better.

Main Menu
Advertisement:

Fixing breadcrumbs at top of page.

Aloittaja Petter B, helmikuu 22, 2014, 08:02:17 AP

« edellinen - seuraava »

Petter B

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/

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/
But I do not know:


       
  • Which class? .navigate_section only makes the text fixed, not the white background.
  • Where do I put the Javascript part?
  • Should I upload a Jquery library to the site? Where?
:-[

Dzonny

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.

Petter B

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...



Petter B


Neo_TE

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. :)

Petter B

#6
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?

Neo_TE

That's possible only with jquery.

And sorry, no demo as of now.

Advertisement: