更改粘性标题航点或偏移的位置。
Basically, I am making a Wordpress site,using the theme Avada, and I would like the sticky header at the top to start immediately.
基本上,我正在使用主题Avada创建一个Wordpress网站,我希望立即开始顶部的粘性标题。
Here is the site I am working on: http://howtogopro.net
这是我正在开发的网站:http://howtogopro.net
Here is the site I am trying to replicate is synergymaids.com
这是我试图复制的网站是synergymaids.com
As you can see the 2nd site the "sticky header" starts right away. I've done some searching and I have found out it is this section, in the main.js file. I have tried changing around a lot of the numbers, and nothing seems to be changing the height it "kicks in"
正如您可以看到第二个站点,“粘性标题”立即开始。我已经做了一些搜索,我发现它是main.js文件中的这一部分。我试过改变很多数字,似乎没有任何改变它“开始”的高度
Below is the section of the main.js file, and I'm pretty sure I need to change some CSS, so here is a link to the CSS file. http://pastebin.com/pd3MUCLh
下面是main.js文件的一部分,我很确定我需要更改一些CSS,所以这里是一个CSS文件的链接。 http://pastebin.com/pd3MUCLh
Appreciate any help on this.
感谢任何帮助。
// 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' );
}
});
};
1 个解决方案
#1
0
I attempted to just re-create a new fixed header for the Avada theme that actually sticks. It took some css doing. But if your interested, I have the link below. https://github.com/mgp271/Avada-Theme-Fixed-Header
我试图为Avada主题重新创建一个新的固定标题。这需要一些css。但如果您有兴趣,我有下面的链接。 https://github.com/mgp271/Avada-Theme-Fixed-Header
更多相关文章
- 如何删除图例饼图中的标题？
- 克隆文本并插入壁橱标题范围
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行，特殊符号，列
- 纯CSS最小化高度标题，绝对定位DIV内最大化身高
- 如何在离子框架中显示图像标题？
- 从浏览器中删除发送到服务器的标题。
- 维基百科，如在PHP中列出标题的索引
- WebKit "拒绝设置不安全的标题'内容长度' "
- 拒绝获取不安全标题“位置”