Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

semi-fixed navigatie balk

Vorige onderwerp Volgende onderwerp Go down

semi-fixed navigatie balk

Bericht van 10spetter10 op vr 13 jun 2014 - 20:04

Semi-fixed navigatie balk


Hallo Gast,

Ben je het beu om altijd naar boven te scrollen voor je navigatie balk te zoeken? Met deze tutorial is het mogelijk om je navigatie balk bovenaan je scherm vast te laten staan. Dit slechts met een klein javascriptje en wat css dat ervoor zorgt dat eens je navigatie balk de bovenrand van je scherm raakt het daar blijft staan.

Demo van de site waarop het gebasseerd is: Klik hier

We starten met een nieuw javascript te maken.

Beheerderspaneel Modules html & javascript Javascript code beheer

Hier maak je een nieuw scriptje.

titel: semi-fixed navbar
plaatsing: Op alle pagina's
javascript code: kopieer de onderstaande code die bij je versie past.

phpBB2:

Code:
$(function() {
   $('#i_icon_mini_index').closest('table').attr('id', 'nav');
});

$(document).ready(function() {  
   var stickyNavTop = $('#nav').offset().top;  
     
   var stickyNav = function(){  
      var scrollTop = $(window).scrollTop();  
      var width = $('.bodylinewidth').width();
           
      if (scrollTop > stickyNavTop) {  
         $('#nav').addClass('fixed');  
         $('#nav').css('width', width);
      } else {  
         $('#nav').removeClass('fixed');  
         $('#nav').css('width', '');
   }  
   };  
     
   stickyNav();  
     
   $(window).scroll(function() {  
      stickyNav();  
   });  
});


PunBB:

Code:
$(document).ready(function() {  
   var stickyNavTop = $('#pun-head').offset().top;  
     
   var stickyNav = function(){  
      var scrollTop = $(window).scrollTop();  
      var width = $('.pun').width();
           
      if (scrollTop > stickyNavTop) {  
         $('#pun-head').addClass('fixed');  
         $('#pun-head').css('width', width);
      } else {  
         $('#pun-head').removeClass('fixed');  
         $('#pun-head').css('width', '');
   }  
   };  
     
   stickyNav();  
     
   $(window).scroll(function() {  
      stickyNav();  
   });  
});


PhpBB3:

Code:
$(document).ready(function() {  
   var stickyNavTop = $('.linklist.navlinks').offset().top;  
     
   var stickyNav = function(){  
      var scrollTop = $(window).scrollTop();  
      var width = $('#wrap').width();
           
      if (scrollTop > stickyNavTop) {  
         $('.linklist.navlinks').addClass('fixed');  
         $('.linklist.navlinks').css('width', width);
      } else {  
         $('.linklist.navlinks').removeClass('fixed');  
         $('.linklist.navlinks').css('width', '');
   }  
   };  
     
   stickyNav();  
     
   $(window).scroll(function() {  
      stickyNav();  
   });  
});


Invision:

Code:
$(document).ready(function() {  
   var stickyNavTop = $('#submenu').offset().top;  
     
   var stickyNav = function(){  
      var scrollTop = $(window).scrollTop();  
      var width = $('#ipbwrapper').width();
           
      if (scrollTop > stickyNavTop) {  
         $('#submenu').addClass('fixed');  
         $('#submenu').css('width', width);
      } else {  
         $('#submenu').removeClass('fixed');  
         $('#submenu').css('width', '');
   }  
   };  
     
   stickyNav();  
     
   $(window).scroll(function() {  
      stickyNav();  
   });  
});


Om dit te laten werken moet je ook nog een paar lijntjes css toevoegen.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading style sheet

Code:
.fixed {
  position: fixed;
  top: 0px;
  padding: 10px;
  margin-left: -0px;
  z-index: 999999;
}

Deze kan je nog allemaal aanpassen in functie van je forum.

Als je problemen ondervind mag je me altijd een pm sturen of een topic openen in het ondersteunings-gedeelte.



Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates  en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum