1
ルビーを活性化していないページスクロールに変更ロゴ画像2.3.1ルビー -
のRails 5.1.2
私は私のナビゲーションバーときに別のものにロゴ画像を変更しようとしています私はスクロールを始めますが、それまでは成功していません。私は、JS部に
var Layout = function() {
'use strict';
// handle on page scroll
var handleHeaderOnScroll = function() {
if ($(window).scrollTop() > 60) {
// var colorLogoPath = "#{asset_path('logo/ymk_logo.png')}";
$('body').addClass('page-on-scroll');
// $('.logo-img .logo-img-active').attr('src', colorLogoPath);
} else {
// var whiteLogoPath = "#{asset_path('logo/ymk_logo_lw.png')}";
$('body').removeClass('page-on-scroll');
// $('.logo-img .logo-img-main').attr('src', whiteLogoPath);
}
}
return {
init: function() {
handleHeaderOnScroll(); // initial setup for fixed header
// handle minimized header on page scroll
$(window).scroll(function() {
handleHeaderOnScroll();
});
}
};
}();
$(document).ready(function() {
Layout.init();
});
：以下のCSSプロパティ
<div class="logo">
<a class="logo-wrap" href="index.html">
<img class="logo-img logo-img-main" src="img/logo/ymk_logo_lw.png" alt="Ymk Logo">
<img class="logo-img logo-img-active" src="img/logo/ymk_logo.png" alt="Ymk Logo">
</a>
</div>
とHAVING：
.header .logo-img-main {
display: inline-block;
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.header .logo-img-active {
display: none;
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.header .logo .logo-img-main {
display: none;
}
.header .logo .logo-img-active {
display: inline-block;
}
.page-on-scroll .header .logo-img-main {
display: none;
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.page-on-scroll .header .logo-img-active {
display: inline-block;
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
とJSを通常のHTMLで、それはこのようにそれを持っていることによってうまく働きました私はこのコードの一部を実装しようとしていたので、この部分をコメントアウトしました。SO questionが表示されていたので私はイメージ。
だから私は戻って、実装し、HTMLにif声明することを決めた。今ここに
<div class="logo">
<a class="logo-wrap">
<% if image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
<%= image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
<% else %>
<%= image_tag("logo/ymk_logo.png", :class => "logo-img logo-img-active", :alt => "Ymk Logo OG") %>
<% end %>
</a>
</div>
、私はymk_logo_lw.png、ページに表示されます最初のロゴをロードする際、表示されますが、私は起動時にしません。スクロールすると、2番目のロゴはymk_logo.pngと表示されます。
私はRubyをかなり新しく考えています。私はそれを手に入れようとしています。ありがとう！
application.js要件：
//= require jquery-3.2.1.min.js
//= require bootstrap-sprockets
//= require swiper/js/swiper.jquery.min.js
//= require components/swiper.min.js
//= require jquery.easing.js
//= require jquery.back-to-top.js
//= require jquery.smooth-scroll.js
//= require jquery.wow.min.js
//= require jquery.parallax.min.js
//= require masonry/jquery.masonry.pkgd.min.js
//= require masonry/imagesloaded.pkgd.min.js
//= require components/wow.min.js
//= require components/masonry.min.js
//= require components/gmap.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
は `_navbar.html.erb：
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="/">
<%= image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
<%= image_tag("logo/ymk_logo.png", :class => "logo-img logo-img-active", :alt => "Ymk Logo OG") %>
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item">
<%= link_to "Home", root_path, class: "nav-item-child nav-item-hover #{yield(:root_active)}", :"data-no-turbolink" => true, method: "get" %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: "nav-item-child nav-item-hover #{yield(:about_active)}", :"data-no-turbolink" => true, method: "get" %>
</li>
<li class="nav-item">
<%= link_to "Contact", contact_path, class: "nav-item-child nav-item-hover #{yield(:contact_active)}", :"data-no-turbolink" => true, method: "get" %>
</li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
チップをありがとう！では、それを実現させるための選択肢は何ですか？他の答えは、私のコメントアウトされたjavascriptの更新を提供しますが、それはまだ私に1つの画像を表示しています。 – wlmrlsda
@ wlmrlsda解決策の私の答えを更新しました。 – ArashM
ありがとう！今、両方の画像が表示されています。最初のロゴが表示される位置に表示され、他のロゴは、スクロールダウンを開始すると、最初のロゴの右下に移動します。サイズが少し大きく、ナビゲーターの外にあります。 'jquery-rails'については、既にjqueryファイルをダウンロードしているので必要ですか？私の質問の一番下の部分を見てください。私は自分の要件を追加しました。 – wlmrlsda