У меня есть следующий код, который добавляет / удаляет "белый" или "черный" класс в мой # anim-nav
Я хочу, чтобы этот код работал только на моей странице индекса (я хочу, чтобы .black применялся все время на других страницах). Этот код находится на отдельной странице .js, вводимой через заголовок (то есть на всех страницах)
$(window).on('scroll', function () {
if ($(window).scrollTop() > 75) {
$('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
} else {
$('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
}
});
Вроде как бы наоборот. Я просто хочу, чтобы "белый" запрос работал на главной странице
Простое использование чего-то вроде этого ..........
if ( is_front_page() && is_home() ) {
// Default homepage
$(window).on('scroll', function () {
if ($(window).scrollTop() > 75) {
$('#anim-nav').addClass('bg-
fill').removeClass('white').addClass('black');
} else {
$('#anim-nav').removeClass('bg-
fill').removeClass('black').addClass('white');
}
});
}
В нем всего два типа страниц. Домашняя страница и страницы single.php
Да, потому что это над изображением на странице индекса, а не на других
Прежде всего, поместите тип ввода hidden
на страницу индекса (не в заголовке, а на отдельной странице индекса)
<input type = "hidden" name = "is_index" value = "1" id = "is_index">
затем получите его значение в jquery и используйте его в условии:
var is_index = '';
$(window).on('scroll', function () {
is_index = $('#is_index').val();
if ($(window).scrollTop() > 75 && is_index == 1) {
$('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
} else {
$('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
}
});
ТАК, это будет работать, так как цель находится в заголовке (моя панель навигации)
На внутренних страницах вроде не меняется
Вы должны поместить код jquery в общий файл, который включен на все страницы (что-то вроде файла заголовка), а скрытый тип ввода должен быть помещен только в код домашней страницы.
Так что просто скрипт в заголовке должен работать, тогда
Вы можете подтвердить через href
Сначала вы получите местоположение
window.location.href
Это вернет строку, которую вы можете проверить, включает ли она index
, используя функцию includes()
.
$(window).on('scroll', function () {
if ($(window).scrollTop() > 75 && !window.location.href.includes('index')) {
$('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
} else {
$('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
}
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Нельзя быть уверенным, что в URL будет index
.
Добавьте элемент ввода или добавьте класс css к любому элементу страницы индекса или проверьте, существует ли какой-либо уникальный класс на странице индекса, тогда в коде js вы можете проверить, что, если он существует, будет выполняться только код
Например, мы добавляем класс homeClass в элемент html страницы индекса, а затем в js вы можете проверить, как показано ниже.
ПРИМЕР КОДА JS
if ($(".homeClass").length) {
$(window).on('scroll', function () {
if ($(window).scrollTop() > 75) {
$('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
} else {
$('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
}
}
});
Итак, чтобы было ясно, вы хотите добавить / удалить jquery
.black
для всех страниц, но не хотите добавлять / удалять jquery.white
, кроме страницы индекса.