|
1 | 1 | /*
|
2 |
| - * This script prevents a navbar with the #navbar-fix identifier |
| 2 | + * This script prevents a navbar with the #sticky-navbar identifier |
3 | 3 | * from scrolling off the top of the browser window. It does this by
|
4 |
| - * detecting when that's about to occur and creating a copy that's |
5 |
| - * added to the page with a fixed position, aligned to the top of |
| 4 | + * detecting when that's about to occur and switching a style class |
| 5 | + * which sets it at a fixed position, aligned to the top of |
6 | 6 | * the page.
|
7 | 7 | *
|
8 |
| - * When the user scrolls back up then this copy is |
9 |
| - * removed so the normal navbar is fully visible again. |
| 8 | + * When the user scrolls back up then this style class is switched |
| 9 | + * back so the normal navbar is fully visible again. |
10 | 10 | *
|
11 | 11 | * Because you can't scroll the fixed copy we're not able to use this
|
12 | 12 | * for the collapsed navigation where menu items are shown vertically.
|
13 | 13 | */
|
14 | 14 |
|
15 | 15 | var isNavBarFixed = 0;
|
16 | 16 |
|
17 |
| -var defaultNavbarOffset = $("#sticky-navbar").offset().top; |
| 17 | +var defaultNavbarOffset = $("#sticky-navbar").length ? $("#sticky-navbar").offset().top : 0 ; |
18 | 18 |
|
19 | 19 | processScroll();
|
20 | 20 | $(window).on('scroll', processScroll);
|
21 | 21 |
|
22 | 22 | function processScroll() {
|
23 | 23 |
|
24 | 24 | var navbar = $("#sticky-navbar");
|
25 |
| - var breadcrumb = $(".breadcrumb"); |
| 25 | + |
| 26 | + if (navbar.length==0) { |
| 27 | + return |
| 28 | + } |
| 29 | + |
| 30 | + var breadcrumb; |
26 | 31 |
|
27 | 32 | if (isNavBarFixed) {
|
28 | 33 | breadcrumb = $(".breadcrumb-fixed");
|
| 34 | + } else { |
| 35 | + breadcrumb = $(".breadcrumb"); |
29 | 36 | }
|
30 | 37 |
|
31 |
| - if (navbar == null || typeof (navbar.offset()) == "undefined" ) { |
32 |
| - return |
33 |
| - } |
34 |
| - |
| 38 | + // Measuring additionall offset depending whether tabzilla exists and is open. |
35 | 39 | var additionalTabzillaOffset = 0;
|
36 | 40 | var tabzilla = $('#tabnav-panel');
|
37 |
| - if (typeof tabzilla != undefined) { |
| 41 | + if (tabzilla.length) { |
38 | 42 | if (tabzilla.hasClass('tabnav-opened')) {
|
39 | 43 | additionalTabzillaOffset=240;
|
40 | 44 | }
|
41 | 45 | }
|
42 | 46 |
|
43 | 47 | // Tabzilla offset needs to bo added if it's open.
|
44 | 48 | if (!isNavBarFixed && $(window).scrollTop() >= (defaultNavbarOffset + additionalTabzillaOffset) ) {
|
| 49 | + |
| 50 | + // Switching navbar style to fixed position at the top. |
45 | 51 | navbar.addClass("navbar-fixed");
|
46 | 52 | navbar.removeClass("navbar-fix");
|
| 53 | + |
| 54 | + // Trick in order to prevent content movement when the navigation starts to scroll. |
47 | 55 | breadcrumb.addClass("breadcrumb-fixed");
|
48 | 56 | breadcrumb.removeClass("breadcrumb");
|
| 57 | + |
49 | 58 | isNavBarFixed = 1;
|
| 59 | + |
50 | 60 | } else if (isNavBarFixed && $(window).scrollTop() < (defaultNavbarOffset + additionalTabzillaOffset) ) {
|
| 61 | + |
| 62 | + // Switching navbar style to non-fixed position. |
51 | 63 | navbar.addClass("navbar-fix");
|
52 | 64 | navbar.removeClass("navbar-fixed");
|
| 65 | + |
53 | 66 | breadcrumb.removeClass("breadcrumb-fixed");
|
54 | 67 | breadcrumb.addClass("breadcrumb");
|
55 |
| - isNavBarFixed = 0 |
| 68 | + |
| 69 | + isNavBarFixed = 0; |
| 70 | + |
56 | 71 | }
|
57 | 72 | }
|
0 commit comments