javascript - 滚动的迷你 Logo 标题

Question

首先我要为我的糟糕英语道歉。

我有带 Picasso 主题的 wordpress。 http://polska2023.pl/我想更改 header 中的 Logo 。我试试这个:replace image in div on scroll down但它在我的网站上不起作用。我有这个:

// Header menu scrolling
            this.navMenu();

/** Header menu scroll **/
        navMenu: function() {

            // one page nav
        if( $('body.template-home-one-page').length ) {

                $('#header-menu').onePageNav({
                    currentClass: 'current-menu-item',
                    changeHash: false,
                    scrollSpeed: 750,
                scrollOffset: 85,
                filter: ':not(.external)'
                });

            }

            $('.mega-menu-style-default').each( function() {
                var mLeft = $(this).width();
                var pWidth = $(this).parent().width();
                var left = mLeft - pWidth;

                $(this).css('margin-left', '-' + left + 'px' );

            });

            window.onresize = function() {

                if( $(window).width() <= 959 ) {

                    $('.mega-menu-style-default').each( function() {
                        $(this).css('margin-left', '0px' );
                    });

                } else {

                    $('.mega-menu-style-default').each( function() {
                        var mLeft = $(this).width();
                        var pWidth = $(this).parent().width();
                        var left = mLeft - pWidth;

                        $(this).css('margin-left', '-' + left + 'px' );

                    });

                }

            }

            if( $('body').hasClass('no-scrolling-menu') == false && $('html').hasClass('mobile') == false && $('body').hasClass('error404') == false && $('#header').length ) {

                var el = $('#header');
                var elpos_original = el.offset().top;

                $(window).scroll(function(){
                    var elpos = el.offset().top;
                    var windowpos = $(window).scrollTop();
                var finaldestination = windowpos;
                var body = $('body');

                if( $(window).width() > 959 ) {

                    if(windowpos<=elpos_original) {
                        finaldestination = elpos_original;

                        el.removeClass('scrolled').attr('style', '');
                    body.removeClass('scrolling')

                    } else {

                        if( body.hasClass('scrolling') == false ) {
                            body.addClass('scrolling');
                        }

                        if( el.hasClass('scrolled') == false ) {
                            el.addClass('scrolled').animate({
                                top: "0px"
                            }, 1000 );
                        }

                        }
                } else {
                        el.removeClass('scrolled').attr('style', '');
                }
                });

            }

            $( window ).resize(function() {
                if( $(window).width() < 959 ) {
                    $('#header').removeClass('scrolled');
                    $('body').removeClass('scrolling');
                } else {
                    $('li.has-children > ul').show().removeAttr('style');
                }
            });

        },

这是标准标志:

<a id="logo"><img style="vertical-align: bottom;" width="185" height="" src="http://polska2023.pl/wp-content/uploads/2014/08/logo.png" alt=""></a>

我想在页面滚动时用这个标志替换: http://polska2023.pl/wp-content/uploads/2014/08/small_logo1.png

请帮助我 :) 谢谢!

Answer 1

在您的 html 文件中，您必须找到:

<a id="logo">
<img width="185" height="" alt="" src="http://polska2023.pl/wp-content/uploads/2014/08/logo.png" style="vertical-align: bottom;">
</a>

然后放在:

<a id="logo-scrolling">
<img width="185" height="" alt="" src="http://polska2023.pl/wp-content/uploads/2014/08/small_logo1.png" style="vertical-align: bottom;">
</a>

此添加需要添加到您的 css 文件中:

body a#logo-scrolling{
    display: none;
}

body.scrolling a#logo{
    display: none !important;
}
body.scrolling a#logo-scrolling{
    display: block !important;
}

希望对你有帮助