2017-10-06 13 views
0

自分のウェブサイトに本当に素敵なCodyHouseのポップアウトメニューが見つかりました。私が直面しています問題は、総jQueryの初心者くさいとして、私は、ユーザーがメニューを使用して開かれた ページを上にスクロールしてメニューを開くときに画像を置き換えます

  • をスクロールアップされたときに...

    1. 私のロゴを交換する方法を見つけ出すように見えることはできませんということですバーガーメニューここ

    は... 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:[email protected]">[email protected]</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を私のロゴの白いバージョンに置き換えたいと考えています。ユーザーがスクロールしてメニューを閉じると、青いバージョンに戻るためにイメージが必要になります。

    私はこれを理解することはできませんのでお手伝いください。私は今、時間試した:(

    オリバー

  • 答えて

    0

    は、ここでは、モックアップでjQueryのコードは次のようになりますいただきました!です

    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; 
    
    }); 
    
    +0

    99.99%で動作するので、これを解決済みとマークしました。私はちょうど白いロゴがまだ表示されているページの一番上にスクロールすると、それにわずかなバグがあります。青いロゴに戻すには、少なくとも1ピクセル下にスクロールする必要があります。これを修正するために提供したコードを変更する方法はありますか?それは100%完璧に近いところにあり、私はそれを並べ替えることは素晴らしいと思います。 ここに私が言っていることのビデオがあります... https://streamable.com/a18ip –

    0

    をので、これはすべてのあなたが持っている、あなたのHTML用の答え

     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; 
    
        }); 
    
    +0

    私はあなたの答えに何を提供しているのが好きですが、私が提供してくれたjQueryの中のすべてがそうです行く?またあなたの参照"#masthead.active"と ".custom-logo-link"は、提供されるHTMLで使用するクラスとは異なります。私が提供したコードと一致するようにクラス/ IDを精巧に変更できますか?私はnewbとして尋ねるだけで、私が現在持っているものにどのように統合されるのか完全に理解していません。 –

    関連する問題