基本上,我正在使用主题Avada创建一个Wordpress网站,我希望顶部的粘性标题立即开始。
以下是我正在处理的网站:http://howtogopro.net
我试图复制的网站是synergymaids.com
正如你可以看到第二个网站的"粘贴标题"立即开始。我已经完成了一些搜索,我发现它是main.js文件中的这一部分。我尝试过改变很多数字,似乎没有什么能改变它在#34;
中踢的高度下面是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' );
}
});
};
答案 0 :(得分:0)
我试图重新为Avada主题重新创建一个新的固定标题。这需要一些css。但如果您有兴趣,我有下面的链接。 https://github.com/mgp271/Avada-Theme-Fixed-Header