#javascript #html #css #twitter-bootstrap
Вопрос:
У меня небольшая проблема с управлением логотипом. У меня есть логотип, который по умолчанию белый, при прокрутке он меняется на черный, и он работает. Проблема в том, что, когда он становится отзывчивым, логотип всегда начинается с белого, а белая навигационная панель не видна. Как я могу сделать так, чтобы, когда он станет отзывчивым, другой логотип начинался напрямую.Я использую Bootstrap. большое спасибо
// JavaScript Document
(function($) {
"use strict";
// Collapse Navbar
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink")
$(".logo").attr("src", "https://www.orticaweb.it/wp-content/uploads/2019/09/Twitter-00-Logo-Nero.png");
} else {
$("#mainNav").removeClass("navbar-shrink")
$(".logo").attr("src", "https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (
location.pathname.replace(/^//, "") ==
this.pathname.replace(/^//, "") amp;amp;
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ?
target :
$("[name=" this.hash.slice(1) "]");
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - 70,
},
1000,
"easeInOutExpo"
);
return false;
}
}
});
})(jQuery); @charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
height: 200vh;
text-align: center;
background-color: black;
letter-spacing: 0.0625em;
}
#mainNav {
min-height: 3.5rem;
background-color: #fff;
}
#mainNav .navbar-toggler:focus {
outline: none;
}
#mainNav .navbar-nav .nav-item:hover {
color: #303F9F;
outline: none;
background-color: transparent;
}
#mainNav .navbar-nav .nav-item:active,
#mainNav .navbar-nav .nav-item:focus {
outline: none;
background-color: transparent;
}
#mainNav .navbar-brand {
color: #303F9F;
font-weight: 500;
}
@media (min-width: 992px) {
#mainNav {
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
background-color: transparent;
transition: background-color 0.3s ease-in-out;
}
#mainNav .navbar-brand {
padding: 0.5rem 0;
color: white;
}
#mainNav .nav-link {
transition: none;
padding: 2rem 1.5rem;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 400;
}
#mainNav .nav-link:hover {
color: rgba(255, 255, 255, 0.75);
}
#mainNav .nav-link:active {
color: #303F9F;
}
#mainNav.navbar-shrink {
background-color: white;
}
#mainNav.navbar-shrink .navbar-brand {
color: #303F9F;
}
#mainNav.navbar-shrink .nav-link {
color: #303F9F;
padding: 1.5rem 1.5rem 1.25rem;
border-bottom: 0.25rem solid transparent;
}
#mainNav.navbar-shrink .nav-link:hover {
color: #7286CC;
}
#mainNav.navbar-shrink .nav-link:active {
color: #303F9F;
outline: none;
border-bottom: 0.25rem solid #303F9F;
}
}
@media (max-width: 992px) {
#mainNav .link-collapse {
color: #303F9F;
font-weight: 400;
}
#mainNav .link-collapse:hover {
color: #7286CC;
font-weight: 400;
}
} <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="mainNav" class="navbar navbar-expand-lg navbar-light amber lighten-4 fixed-top">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#home"><img class="img-fluid logo" src="https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png" width="50px">Logo Agency</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="toggle navigation">MENU<i class="fas fa-bars"></i></button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example1</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example2</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger link-collapse" href="#">example3</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="script.js"></script>
</body>
</html> Комментарии:
1. Я не могу легко воспроизвести причину размера предоставленного окна, но я думаю, что вы ищете способ определить, находится ли навигационная панель уже в том состоянии, в котором она выскочила? Если это так, поскольку у вас запущен jQuery, вы можете проверить функцию document.ready, если на панели навигации есть класс, который делает ее отзывчивой с помощью .hasClass (), а затем принудительно удалить ее, если это так. Это то, о чем ты говоришь?
Ответ №1:
Если я не ошибаюсь, вы хотите показать черный логотип на мобильных устройствах? Это может быть достигнуто с помощью CSS.
@media only screen and (max-width: 600px) {
.logo {
background: URL('blacklogopath') !important;
}
}
Комментарии:
1. да, и в этом я согласен, проблема в том, что, как только я начинаю реагировать, если я прокручиваю, а затем возвращаюсь, по умолчанию появляется белый логотип. Это я не могу решить, вы должны уничтожить функцию в общей сложности px