自分のウェブサイトに本当に素敵なCodyHouseのポップアウトメニューが見つかりました。私が直面しています問題は、総jQueryの初心者くさいとして、私は、ユーザーがメニューを使用して開かれた ページを上にスクロールしてメニューを開くときに画像を置き換えます
- 私のロゴを交換する方法を見つけ出すように見えることはできませんということですバーガーメニューここ
は... 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を私のロゴの白いバージョンに置き換えたいと考えています。ユーザーがスクロールしてメニューを閉じると、青いバージョンに戻るためにイメージが必要になります。
私はこれを理解することはできませんのでお手伝いください。私は今、時間試した:(
オリバー
99.99%で動作するので、これを解決済みとマークしました。私はちょうど白いロゴがまだ表示されているページの一番上にスクロールすると、それにわずかなバグがあります。青いロゴに戻すには、少なくとも1ピクセル下にスクロールする必要があります。これを修正するために提供したコードを変更する方法はありますか?それは100%完璧に近いところにあり、私はそれを並べ替えることは素晴らしいと思います。 ここに私が言っていることのビデオがあります... https://streamable.com/a18ip –