semi-fixed navigatie balk

Vorige onderwerp Volgende onderwerp Ga naar beneden

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

avatar

10spetter10
Medaille Forumlid

Man Aantal berichten : 1223
Geboortedatum : 21-04-97
Leeftijd : 21
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