И что помешает вам использовать идентификаторы вместе с классами? И почему вы не сможете перейти на другие страницы с помощью window.location.href, как показано выше? (фрагмент, который я отправил, только делает это). Если вы хотите, вы можете использовать другой атрибут для ссылок, составьте его как «data-link».
отаю над сайтом в Bootstrap 4, в котором есть разделы со светлым и темным фоном и фиксированная панель навигации.
Навбар темный (имеет класс cssbg-dark) и, хотя он легко виден на светлом участке, он неразличимпротив темноты из них.
Я пытался изменить Navbar'snavbar-dark bg-dark вnavbar-light bg-light когда пользователь достигаеттемная часть (решение было предложено на StackOverflow):
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
$('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
.toggleClass('navbar-light bg-light', !isBGLight);
});.page-section {
padding: 70px 10px
}
.page-section.bg-dark * {
color: #fff;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid bg-light page-section">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div class="container-fluid bg-dark page-section">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div class="container-fluid bg-light page-section">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>Как видите, я использовал прокрутку-шпиона, нонарушил свои правила (в котором говорится, что якоря должны «указывать на элемент с идентификатором»): элементы моей панели навигации указывают на другие страницы веб-сайта ине к разделам текущей страницы.
Что этоальтернатива подходит для ситуации выше?