fixer header und content soll darunter beginnen

[m-werk]

Hallo, ich hab einen fixen header mit 110px höhe.

Nun ist es so, dass zwar der Content darunter scrollt (Onepage) aber der Content ist immer hinter dem Header, wenn ich wieder an der obersten Position bin.

Wie kann ich es einstellen, dass der Content (main) unter dem Header stehen bleibt?

[Spooky]

Gib einfach dem #container ein padding-top von 110px.

[m-werk]

Tja, das hatte ich schon versucht.

Zu sehen hier: http://test.supris.at/home-kopie.html

Wenn ich die Seite aufrufe, passt es, aber wenn ich dann auf "Home" klicke, scollt es nach oben. Das gleiche, wenn ich auf Kontakt und dann wieder auf Home klicke.

[Spooky]

Das ist wiederum ein anderes Problem. Du musst dein JavaScript so abbändern, sodass die tatsächlich Scroll Ziel Position um die Höhe des #header verändert wird.

[m-werk]

tja, das ist jetzt das Problem.

Dies sollte das J_Query sein:

<script src="/bundles/eufonepagenavigation/jquery.waypoints.js"></script>
<script>
$(document).ready(function() {
	var el = $('a[href*="#"]').not('[href="#"]').not('[href="#0"]');
  	var scrollSpeed = 800;
	var uri = window.location.href.split("#")[0];
  
  el.click(function(event) {
      // check if On-page links
      if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
          &&
          location.hostname == this.hostname
      ) {
              // Figure out element to scroll to
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
              // Does a scroll target exist?
              if (target.length) {
                  // Only prevent default if animation is actually gonna happen
                  event.preventDefault();
                  $('html, body').animate({
                      scrollTop: target.offset().top
              }, scrollSpeed);
          }
      }
  });

        // set nav active when scrolling
	var navActive = function(section) {
		var $el = $('.onepage_navigation__list');
		
		$el.find('li.active').removeClass('active');
		$el.each(function(){
			$(this).find('a[data-onepagelink="'+section+'"]').parent().addClass('active');
		});
	};

	var navigationSection = function() {
	var $section = $('.mod_article');
		
		$section.waypoint(function(direction) {
		  	
		  	if (direction === 'down') {
		    	if($(this.element).hasClass('onepage_article')) {
			    	// change url to active link
			    	navActive(this.element.id);
		    	
			    	// change url to active link
			    	if (typeof(window.history.pushState) == 'function') {
							history.pushState("", "", uri + '#' + this.element.id);
						}
					}
		  	}
		}, {
	  		offset: '50%'
		});

		$section.waypoint(function(direction) {
			
		  	if (direction === 'up') {
			  	var previousWaypoint = this.previous();
		    	
		    	if($(this.element).hasClass('onepage_article')) {
			    	// change url to active link
			    	navActive(this.element.id);
						history.pushState("", "", uri +  '#' + this.element.id);
		    	} else {
			    	navActive(previousWaypoint.element.id);
				  	history.pushState("", "", uri +  '#' + previousWaypoint.element.id);				  	
			  	}
		  	} 
		  	
		}, {
		  	offset: function() {
			    return (this.context.innerHeight()/2) - this.element.offsetHeight; // offset 50% from bottom
			  },
		  	group: $section
		});
	};
	
	$(function(){
		navigationSection();
	});	
        
});
</script>

Hmm, nur wo bau ich dies ein?

[Spooky]

Bei

scrollTop: target.offset().top

Der Rest muss evt. auch angepasst werden.

[m-werk]

Danke für den Tipp. Das war's.

Ich hab jetzt noch folgendes eingebaut. Hier wird jetzt auch automatisch die höhe des Headers abgefragt:

var headerHeight = $("#header").height();

und dann

$('html, body').animate({scrollTop: target.offset().top - headerHeight}, scrollSpeed);

Somit funktioniert es, auch wenn ich via CSS die Höhe des Headers ändere