.scrollTop auf ein Element mit festen Bannern auf der Oberseite des Bildschirms

Question

Ich habe herausgefunden, wie scrollTop wie diese zu machen:

$("#nav-home").click(function() { 
    $('html, body').animate({scrollTop: $("#content-home").offset().top}, 800); 
}); 

Aber mein Problem ist, dass ich eine feste Banner auf dem Bildschirm habe so, wenn es scrollt der Seitenteil des Elements #content-home wird durch das Banner ausgeblendet.

Auch ich dies mit:

var hheight = $(".mainh").height(); 
var theight = hheight + 14; 
$("#first-content").css("margin-top", mheight + "px") 

automatisch oberen Rand hinzufügen, je nach Höhe des Banners + 2 * 7px Grenze (+ 14). Ich weiß, es ist dumm, aber ich bin damit zufrieden, so zu arbeiten.

Also ich frage nach etwas wie eine Möglichkeit, mehr zum Offset hinzuzufügen. Oder fügen Sie vielleicht den Offset des ersten Elements hinzu, das von dem oben erwähnten "Margenrechner" betroffen ist.

Wenn Sie mir dabei helfen könnten und vielleicht sogar ein paar Tipps hinzufügen, wäre ich wirklich glücklich.

Answer 1

Warum nicht die Höhe des Banners auf die scrollTop Zahl subtrahieren?

var contentTop = $("#content-home").offset().top; 
var hheight = $(".mainh").outerHeight(true); // the 'true' in the statement will include the top and bottom margin of the element, if they exist. 
var scrollTopY = contentTop - hheight; 

$("#nav-home").click(function() { 
    $('html, body').animate({scrollTop: scrollTopY}, 800); 
}); 

Answer 2

Verwendung dieses

$ ('mainh'). OuterHeight (true)