Question

我在他们的网站上找到了一个非常好的CodyHouse弹出菜单。作为一个完整的jQuery newb，我面临的问题是，我似乎无法弄明白如何更换我的徽标......

用户向上滚动
使用汉堡菜单

以下是CodyHouse提供的代码以及我目前使用的代码......

jQuery(document).ready(function($){
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MQL = 1170;

//primary navigation slide-in effect
if($(window).width() > MQL) {
    var headerHeight = $('.cd-header').height();
    $(window).on('scroll',
    {
        previousTop: 0
    }, 
    function () {
        var currentTop = $(window).scrollTop();
        //check if user is scrolling up
        if (currentTop < this.previousTop ) {
            //if scrolling up...
            if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                $('.cd-header').addClass('is-visible');
            } else {
                $('.cd-header').removeClass('is-visible is-fixed');
            }
        } else {
            //if scrolling down...
            $('.cd-header').removeClass('is-visible');
            if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
        }
        this.previousTop = currentTop;
    });
}

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
}); });

HTML是......

<div class="cd-header">
    <div class="cd-logo"><a href="<?php echo get_site_url(); ?>"><img src="/wp-content/uploads/2017/09/Wunderful_Designs_Logo-_-Print_300dpi-_-Royal_Blue_Version.svg" width="250" height="auto"/></a></div>

    <nav>
        <ul class="cd-secondary-nav">
            <li><a href="tel:+448451390151">0845 139 0151</a></li>
            <li><a href="mailto:hello@wunderful.co.uk">hello@wunderful.co.uk</a></li>
        </ul>
    </nav> <!-- cd-nav -->


    <a class="cd-primary-nav-trigger" href="#0">
        <span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span>
    </a> <!-- cd-primary-nav-trigger -->
</div>

<nav>
    <ul class="cd-primary-nav">
        <li class="cd-label">About us</li>

        <li><a href="#0">The team</a></li>
        <li><a href="#0">Our services</a></li>
        <li><a href="#0">Our projects</a></li>

        <li class="cd-label">Work with us</li>

        <li><a href="#0">Start a project</a></li>
        <li><a href="#0">Join In</a></li>
        <li><a href="#0">Create an account</a></li>

        <li class="cd-label">Follow us</li>

        <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li>
        <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li>
        <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li>
        <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li>
    </ul>
</nav>
<header>
    <div class="block">
        <div class="two-column">
            <div class="column home-intro">
                <div class="block">         
                    <h1>This is Wunderful</h1>
                    <p>My web studio delivers minimalist yet enticing websites that focus on user experience and converting sales.</p>
                    <p>I also support website owners post launch, revising tactics and improving results.</p>
                    <p class="signoff">- Oliver Martin</p>
                    <a href="#"><button class="two-tone">LET'S TALK! <img src="/wp-content/uploads/2017/09/wave.svg" width="30px" height="auto" /></button></a>
                    <p style="margin-left: 15px;"><img src="/wp-content/themes/wunderful/assets/images/rounded-arrow.svg" width="25px" height="auto"> <small><a href="#">VIEW MY PROJECTS</a></small></p>
                </div>
            </div>
            <div class="column">
                <img src="/wp-content/themes/wunderful/assets/images/project-presentation" alt="Lion Windows - Website Project" width="100%" height="auto">
            </div>
        </div>
    </div>
</header>

所以基本上我想在浏览器窗口向上滚动和触发菜单按钮时用我的徽标的白色版本替换.cd-logo img的src。当用户向下滚动并关闭菜单时，我需要将图像恢复为蓝色版本。

请帮助，因为我无法弄清楚这一点。我现在已经试了好几个小时了:(

奥利弗

Answer 1

所以这就是答案

        var iScrollPos = 0;
    jQuery(window).scroll(function () {
        var iCurScrollPos = jQuery(this).scrollTop();
        if (iCurScrollPos > iScrollPos) {
            //Scrolling Down
           jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mymain_logo.png'); 

        }else {

           //Scrolling Up
           jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mywhite_logo.png'); 
        }

        iScrollPos = iCurScrollPos;

    });

Answer 2

对于你的html模拟，这里是jquery代码看起来是什么样的，所有你必须将src属性中的文本更改为你想要切换到的图像的链接。

 var iScrollPos = 0;
jQuery(window).scroll(function () {
    var iCurScrollPos = jQuery(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        //Scrolling Down
       jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 

    }else {

       //Scrolling Up
       jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 
    }

    iScrollPos = iCurScrollPos;

});

向上滚动页面和打开菜单

2 个答案: