• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bei Scrolltop einen Abstand hinzufügen

Maxx09

New member
Hallo,
ich hab von Javascript so gut wie kein Plan und baue gerade eine Wordpressseite zusammen.
Dabei benutz ich auch ein Plugin mit dem man solche ausklappbaren Accordions (hoffe ihr wisst was ich meine) einfügen kann.
Mein Problem ist jetzt, dass ich auch eine Navi in der Website habe, die ab dem Zeitpunkt, an dem man den oberen Bildschirmrand erreicht dort fixed ist.
Die Accordions scrollen beim öffnen automatisch soweit, bis der Titelbereich auch am oberen Bildschirmrand ist.
Da dort ja aber schon das fixierte div von der Navigation ist, sieht man den Titel nicht weil die Navi-Div darübergelagert ist.
Ich glaube ich hab schon den Teil im Plugin ausgemacht, in dem der Scrolleffekt für das Accordion steckt.
Allerdings weiß ich nicht, wie ich da nun was einfügen kann, dass er eben nicht bis ganz zum oberen Bildschirmrand scrollt, sondern noch einen oberen Abstand von 33 px einhält quasi nen margin-top von 33 oder sowas(so hoch ist das Navi-div).

Hier das ist der CodeTeil der scheinbar fürs öffnen und dann an den Bildschirmrandscrollen zuständig ist.
Code:
omShortcodes.modules.toggle = {
	init: function() {

		jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').click(function(){
			
			var $toggle=jQuery(this).parent();
			
			if($toggle.hasClass('omsc-expanded')) {
				$toggle.removeClass('omsc-expanded');
				$toggle.find('.omsc-toggle-inner').slideUp(300);
				return false;
			}
	
			var $acc=$toggle.parents('.omsc-accordion');
			if(!$acc.hasClass('omsc-multiopen'))
				$acc.find('.omsc-toggle.omsc-expanded').removeClass('omsc-expanded').find('.omsc-toggle-inner').slideUp(300);
	
			$toggle.find('.omsc-toggle-inner').slideDown(300,function(){
				var h=jQuery(this).parent().height();
				var pos=jQuery(this).parent().find('.omsc-toggle-title').offset();
				var scroll=jQuery(window).scrollTop();
				var wh=jQuery(window).height('');
				if(pos.top < scroll || (pos.top > scroll && pos.top+h > scroll+wh))
					jQuery('html,body').animate({ scrollTop: pos.top+'px' }, 200);
			}).find('iframe[src*="maps.google"]').each(function(){
				jQuery(this).attr('src',jQuery(this).attr('src'));
			});
			$toggle.addClass('omsc-expanded');
			
		});
		
		jQuery('.omsc-toggle').not('.in-accordion').find('.omsc-toggle-title').click(function(){
			
			var $toggle=jQuery(this).parent();
			
			var $inner=$toggle.find('.omsc-toggle-inner');
			if(!$inner.length)
				return false;
			if($inner.is(':animated'))
				return false;
			
			$toggle.toggleClass('omsc-expanded');
			$inner.slideToggle(300);
			if($toggle.hasClass('omsc-expanded')) {
				$inner.find('iframe[src*="maps.google"]').each(function(){
					jQuery(this).attr('src',jQuery(this).attr('src'));
				});
			}
			
			return false;
		});
		
	}
}
 
Hab den Code mal überflogen...

Vielleicht so:
Code:
			$toggle.find('.omsc-toggle-inner').slideDown(300,function(){
				var nh=jQuery('#ID_von_dem_navi_div').height();
				var h=jQuery(this).parent().height();
				var pos=jQuery(this).parent().find('.omsc-toggle-title').offset();
				var scroll=jQuery(window).scrollTop()+nh;
				var wh=jQuery(window).height('');
				if(pos.top < scroll || (pos.top > scroll && pos.top+h > scroll+wh))
					jQuery('html,body').animate({ scrollTop: (pos.top+nh)+'px' }, 200);
			}).find('iframe[src*="maps.google"]').each(function(){
				jQuery(this).attr('src',jQuery(this).attr('src'));
			});
 
Danke für die schnelle Antwort.
Hm ohjee die id von der Navi ist in der style.css welche wo ganz anders liegt als der plugin Ordner und die js.
Wie binde ich die denn da ein?
Alle anderen verwendeten css Klassen beziehen sich auf eine css in der nur die Styles für das Plugin sind.
Kann man das nicht einfach durch eine Zahlangabe in der .js lösen?
 
Zuletzt bearbeitet:
Ääähm dem Navi-div einfach eine ID vergeben (wenn das nicht bereits schon eine hat) <div id="navibox">...</div> und
diese dann einfach einfügen var nh=jQuery('#navibox').height();...
Verstehe jetzt nicht so ganz dein Problem!?
 
Na die js. vom plugin ist im ordner wp-content/plugins/olevmedia-shortcodes/assets/js/shortcodes.js

in der wp-content/plugins/olevmedia-shortcodes/assets/css/shortcodes.css
sind die sonstigen ids etc. für alle styles die nur das plugin betreffen wie die farbe etc. vom accordion festgehalten

und die style.css in welcher der ganze aufbau der seite etc festgehalten ist (auch die navi id) ist im ordner /wp-content/themes/themename/style.css

Deshalb die Frage ob die .js einfach auf die id von der style.css die wo ganz anders liegt zugreifen kann?
Zumindest tut sich nix wenn ich die id von der navi einfach reinschreibe.
 
Die ID, von der ich spreche, hat nichts damit zu tun, wo du welche JavaScript- oder CSS-Dateien gespeichert hast.

Zumindest tut sich nix wenn ich die id von der navi einfach reinschreibe.
Dann zeig doch mal etwas mehr Code (HTML und JavaScript) oder mach eine Testseite mit Link, wo man sich das mal anschauen kann.
 
Dann sollte es so aussehen:
Code:
			$toggle.find('.omsc-toggle-inner').slideDown(300,function(){
				var nh=jQuery('#navbar').height();
				var h=jQuery(this).parent().height();
				var pos=jQuery(this).parent().find('.omsc-toggle-title').offset();
				var scroll=jQuery(window).scrollTop()+nh;
				var wh=jQuery(window).height();
				if(pos.top < scroll || (pos.top > scroll && pos.top+h > scroll+wh))
					jQuery('html,body').animate({ scrollTop: (pos.top-nh)+'px' }, 200);
			}).find('iframe[src*="maps.google"]').each(function(){
				jQuery(this).attr('src',jQuery(this).attr('src'));
			});
 
Yeay super vielen Dank das funzt.
Ruckelt bei dir die Animation auch?
Also bei mir läuft sie im ie, chrome und firefox flüssig.
Ich muss nur noch allgemein an der Performance vom Seitenaufbau arbeiten.
Vielleicht ist doch das ein oder andere Plugin zu viel.
 
Zurück
Oben