javascript - 更改粘性 header 航路点或偏移量的位置。

Question

基本上，我正在制作一个 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' );
         }
    });
};

Answer 1

我试图为实际坚持的 Avada 主题重新创建一个新的固定标题。做了一些CSS。但如果你感兴趣，我有下面的链接。 https://github.com/mgp271/Avada-Theme-Fixed-Header