滚动的迷你徽标标题答案

【问题标题】：Scrolled mini logo header滚动的迷你徽标标题
【发布时间】：2014-08-10 15:46:24
【问题描述】：

一开始我想为我糟糕的英语道歉。

我有毕加索主题的 wordpress。 http://polska2023.pl/ 我想更改标题中的徽标。我试试这个：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

请帮助我 :) 谢谢！

【问题讨论】：

标签： javascript html css wordpress scroll

【解决方案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;
}

希望这会有所帮助

【讨论】：

非常感谢！！！它有效，但我必须将 display: block 更改为内联。谢谢！ :)