基本上，我正在制作一个 Wordpress 网站，使用 Avada 主题，我希望顶部的粘性标题立即开始。
这是我正在处理的网站:http://howtogopro.net
我要复制的网站是 synergymaids.com
如您所见，第二个站点的“粘性 header ”立即开始。我做了一些搜索，发现它是 main.js 文件中的这一部分。我已经尝试改变很多数字，但似乎没有任何改变它“踢入”的高度
下面是 main.js 文件的部分，我很确定我需要更改一些 CSS，因此这里是 CSS 文件的链接。 http://pastebin.com/pd3MUCLh
感谢对此的任何帮助。
// init sticky header
jQuery.fn.init_sticky_header = function() {
var sticky_mobile_menu_padding;
var sticky_header_height = 65;
var sticky_top = jQuery('.sticky-header').css('top');
var sticky_start = sticky_top.replace('','') + 50;
var logo = '.sticky-header .logo img.normal_logo';
var not_logo = '.sticky-header .logo img.retina_logo';
var orig_logo_height, orig_logo_width, logo_max_width, width_ratio, calc_width, calc_height,
logo_height, logo_line_height, logo_width, logo_margin_top = 0;
var anchor_scrolling = 0;
jQuery('.sticky-header').css('top', sticky_start+'px');
jQuery('.init-sticky-header').waypoint(function(direction) {
if(direction === "down") {
// one page anchor page load scrolling
var adminbar_height = jQuery('#wpadminbar').outerHeight();
var anchor = window.location.hash.toString();
if( anchor.length > 1 && jQuery(anchor).length && ! anchor_scrolling ) {
jQuery('html, body').animate({
scrollTop: jQuery(anchor).offset().top-300,
}, 'easeInOutExpo');
anchor_scrolling = 1;
}
if( jQuery('#wpadminbar').length ) {
sticky_top = jQuery('#wpadminbar').outerHeight()+"px";
}
jQuery('.sticky-header').show();
jQuery('.sticky-header').animate({
height: sticky_header_height -50 + 'px',
top: sticky_top
}, 10 );
jQuery('.sticky-shadow').animate({
height: sticky_header_height + 'px',
top: sticky_top
}, 10 );
if( jQuery('#header .retina_logo').is(':visible')) {
logo = '.sticky-header .logo img.retina_logo';
not_logo ='.sticky-header .logo img.normal_logo';
} else {
logo = '.sticky-header .logo img.normal_logo';
not_logo = '.sticky-header .logo img.retina_logo';
}
orig_logo_height = jQuery(logo).height();
orig_logo_width = jQuery(logo).width();
logo_max_width = jQuery(logo).data("max-width");
//IE8 quirks
if (jQuery('.no-svg').length >= 1) {
orig_logo_height = orig_logo_height + 4;
orig_logo_width = orig_logo_width + 4;
}
calc_width = orig_logo_width;
calc_height = orig_logo_height;
if (logo_max_width > 0) {
width_ratio = logo_max_width / orig_logo_width;
calc_width = logo_max_width;
calc_height = orig_logo_height * width_ratio;
}
if (calc_height > 55) {
logo_height = "55px";
logo_line_height = "55px";
logo_width = 55 / orig_logo_height * orig_logo_width;
logo_margin_top = "5px";
} else {
logo_height = calc_height+"px";
logo_line_height = calc_height+"px";
logo_width = calc_width;
logo_margin_top = (65 - calc_height) / 2;
}
sticky_mobile_menu_padding = logo_width+25;
jQuery('body #header-sticky.sticky-header .sticky-shadow .mobile-nav-holder').css('padding-left', sticky_mobile_menu_padding+"px");
logo_width = logo_width+"px";
//IE8 quirks
if ( jQuery( '.no-svg' ).length ) {
jQuery(logo).animate({
height: logo_height,
'line-height': logo_line_height,
'max-width': logo_width,
'margin-top': logo_margin_top
}, 500 );
jQuery(not_logo).css('height', logo_height).css('line-height', logo_line_height).css('max-width', logo_width).css('margin-top', logo_margin_top);
jQuery(logo).css('display', '');
} else {
jQuery(logo).animate({
height: logo_height,
'line-height': logo_line_height,
width: logo_width,
'margin-top': logo_margin_top
}, 500 );
jQuery(not_logo).css('height', logo_height).css('line-height', logo_line_height).css('width', logo_width).css('margin-top', logo_margin_top);
jQuery(logo).css('display', '');
}
jQuery('.sticky-header #sticky-nav ul.menu > li > a').animate({
height: sticky_header_height + 'px',
'line-height': sticky_header_height + 'px'
}, 500 );
jQuery('.sticky-header').addClass('sticky');
jQuery('#small-nav').css('visibility', 'hidden');
} else if(direction === "up") {
jQuery('.sticky-header').css( 'height', '' );
jQuery('.sticky-shadow').css( 'height', '' );
jQuery('#header-sticky .retina_logo').css( 'height', orig_logo_height );
jQuery('#header .retina_logo, #header-sticky .retina_logo').css( 'width', orig_logo_width );
jQuery('#header-sticky .retina_logo').css( 'margin-top', '' );
jQuery('#header .normal_logo, #header-sticky .normal_logo').css( 'height', '' );
jQuery('#header .normal_logo, #header-sticky .normal_logo').css( 'width', '' );
jQuery('#header-sticky .retina_logo').css( 'margin-top', '' );
jQuery(logo+','+not_logo).css( 'line-height', '' );
jQuery(logo+','+not_logo).css( 'padding-top', '' );
jQuery(logo+','+not_logo).css( 'max-width', '' );
jQuery(logo+','+not_logo).css( 'margin-top', '' );
jQuery('.sticky-header #sticky-nav ul.menu > li > a').css( 'height', '' );
jQuery('.sticky-header #sticky-nav ul.menu > li > a').css( 'line-height', '' );
jQuery('.sticky-header').removeClass( 'sticky' );
jQuery('.sticky-header').hide();
jQuery('#small-nav').css('visibility', 'visible');
jQuery('.sticky-header .mobile-nav-holder #mobile-nav').css( 'display', 'none' );
}
});
};
最佳答案
我试图为实际坚持的 Avada 主题重新创建一个新的固定标题。做了一些CSS。但如果你感兴趣，我有下面的链接。 https://github.com/mgp271/Avada-Theme-Fixed-Header
关于javascript - 更改粘性 header 航路点或偏移量的位置。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28122068/