jQuery在从页面中间加载时为固定标题设置边距顶部

Question

我有一个简单的滚动标题，它的大小会减小(由于徽标高度减小(，并将正文上的边距顶部设置为固定标题。

我的问题是当我使用 scrollTop(( 加载页面超过我的标题高度时，边距顶部设置得太小 - 因为我的图像缩小了。

.css：

body {
-webkit-transition: margin-top .2s ease;
transition: margin-top .2s ease;
}
.site-header {
position: fixed;
z-index: 110;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #555;
background: rgba(71,117,25,.9);
}
.custom-logo-link img {
max-height: 75px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.scrolling .custom-logo-link img {
max-height: calc(75px * .8);
-webkit-transform: translateX(25%);
transform: translateX(25%);
}

jquery：

jQuery(window).on('load', function(){
marginTop();
function marginTop(){
var header = jQuery('.site-header');
var headerHeight = header.height();
var body = jQuery('body');
body.css('margin-top', headerHeight);
}
})
jQuery(window).on('scroll', function(){
scrolling();
function scrolling(){
var header = jQuery('.site-header');
var headerHeight = header.height();
var scrollTop = jQuery(window).scrollTop();
var flag = true;
if (scrollTop > headerHeight && flag){
header.addClass('scrolling');
flag = false;
} else {
header.removeClass('scrolling');
flag = true;
}
}
})

开发站点：http://www.dev.mediaworksweb.com/cologeo-wp/

编辑：

我意识到，如果滚动超过我的设定点，仅根据徽标高度加载我身体的边缘顶部是行不通的。我也不太想在我的标题上设置静态高度，在正文/任何容器上设置边距顶部。

我试图在我的scrolling((函数的另一端添加我的marginTop((函数的副本，以便在到达页面顶部时重置它，但它不准确(可能是由于过渡？

谢谢 马 特

Answer 1

好吧，我最终添加了另一个函数(reset_marginTop(((，并且不得不使用超时来解释我的转换。我不太想这样做，因为它每次滚动到页面顶部时都会重置 marginTop。但是，如果有人看的话，这就是我正在使用的：

jQuery(window).on('scroll', function(){
function reset_marginTop(){
var body = jQuery('body');
var bodyMargin = parseInt(body.css('margin-top'));
var header = jQuery('.site-header');
var headerHeight = parseInt(header.height());
if (headerHeight > bodyMargin) {
body.css('margin-top', headerHeight);
}
}
scrolling();
function scrolling(){
var header = jQuery('.site-header');
var headerHeight = header.height();
var scrollTop = jQuery(window).scrollTop();
var flag = true;
if (scrollTop > headerHeight && flag){
header.addClass('scrolling');
flag = false;
} else {
header.removeClass('scrolling');
flag = true;
setTimeout(reset_marginTop, 200);
}
}
})