Fixed Navi Plugin für Business Templates erstellen

03.01.2016 12:25

Für alle die sich nicht trauen ein PI zu bauen ...
das Plugin gibt es bereits als getestet von FoX im StoreDamit ist der Offizielle Plugin Store von Xobor gemeint den ihr unter Admin/Plugin Finden könnt.

Ich habe seit ein Paar Tagen eine Möglichkeit gesucht die Navigation beim Runter Scrollen am Oberen Bildschirmrand zu Fixieren.

Dieses ist nun Umgesetzt und um euch dennoch die Möglichkeit zu geben die Funktion zu nutzen hier mal ein Tutorial wie man das anstellt.

So in etwa sollte das aussehen

http://jsfiddle.net/yeco/4EcFf/

Um das nun an das Xobor Design Business anzupassen habe ich mal einen Code erstellt. Dieser wurde noch ein wenig von WolverineX verfeinert.

Dies ist nun der Code der Genutzt wird

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
{{plugin_fixedscrollnav_config_rechte==true.start}}
<style>
	#obere_leiste {
		width: 100%;
		
	}
</style>
 
<script>
  $(function() {
    var sticky_navigation_offset_top = $('#navigation').offset().top;
    var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); 
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#navigation').css({
				'position': 'fixed',
				'top': 0,
				'width': (($('#obere_leiste').width() / $(document).width()) * 100) + '%'
			});
        } else {
          $('#navigation').css({
			  'position': 'relative',
			  'width': '100%'
		  }); 
        }
    };
     sticky_navigation();
   	$(window).scroll(function() {
         sticky_navigation();
    });
 
});
</script>
 
 
{{plugin_fixedscrollnav_config_rechte==true.end}}
 
 

Wie kann nun jeder sein eigenes Plugin daraus erstellen. Dazu habe ich hier mal ein Video gemacht das es verdeutlicht.

Leider ist das Ohne Ton ich hoffe es ist dennoch alles sichtbar?

Zu sehen ist das Plugin hier in Action

http://www.offroadfreunde-nord.de/

Scrollt man auf der Seite nun nach unten ist nach Erreichen der Navigation diese am Bildschirmrand oben Fixiert und kann somit überall auf der Forumsseite genutzt werden. Ich erinnere mich das einige eine 2. Navigation unten eingebaut haben. Das wäre nun hiermit hinfällig da sie immer im Blickfeld ist.

Hier nun mal ein Demo Video wie das ganze erstellt wird.