Я работаю над приложением django. С templates в django я создал несколько страниц с одним базовым шаблоном. страницы типа index.html, about.html и contact.html наследуют код от base.html. Внутри шаблона base.html находится код для панели навигации.
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Anton|Open+Sans&display=swap" rel="stylesheet">
<!-- base.css -->
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<!-- base.js -->
<script src="{% static 'js/base.js' %}"></script>
<title>{% block title %}base{% endblock %}</title>
{% block header %}{% endblock %}
</head>
<body>
{% block content %}
{% endblock content %}
<!-- navbar -->
<nav class="navbar fixed-top navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link hover_effect" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link hover_effect" href="{% url 'about' %}">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link hover_effect" href="{% url 'contact_us' %}">Contact Us</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
При просмотре в браузере панель навигации по умолчанию не имеет цвета фона, но при прокрутке вниз цвет фона добавляется на панель навигации. Я достигаю этого с помощью jquery.
base.js
$(document).ready(function() {
$('.nav-link').css('color', '#F2B705')
})
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 80) {
$(".navbar").css('background', 'transparent');
$('.nav-link').css('color', '#F2B705')
}
if(scroll_pos > 100) {
$(".navbar").css('background', 'linear-gradient(to right, #ffb347, #ffcc33)');
$('.nav-link').css('color', '#141259')
}
});
});
Проблема, с которой я сталкиваюсь, заключается в том, что когда я наследую базовый шаблон на других страницах, я хочу, чтобы jquery такжеработать на всех страницах. Я могу просматривать саму панель навигации на всех страницах, но по какой-то странной причине код base.js jquery работает только в шаблоне index.html, а не в других шаблонах. Ниже приведен код для index.html и contact.html
index.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Home{% endblock title %}
{% block header %}
<!-- index.css -->
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<!-- index.js -->
<script src="{% static 'js/index.js' %}"></script>
{% endblock header %}
{% block content %}
...
{% endblock content %}
contact.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Contact Us{% endblock title %}
{% block header %}
<!-- contact.css -->
<link rel="stylesheet" href="{% static 'css/contact.css' %}">
<!-- contact.js -->
<script src="{% static 'js/contact.js' %}"></script>
{% endblock header %}
{% block content %}
...
{% endblock content %}
Даны CDN для начальной загрузки и jqueryтолько внутри базового шаблона. Я попытался добавить CDN в другие шаблоны, но это не работает. Хотя часть кода начальной загрузки прекрасно работает на всех страницах, даже если CDN существует только в базовом шаблоне, код jquery внутри base.js работает только в шаблоне index.html, но не на других страницах.
Это - одна ссылка, обнаруженная мной, с аналогичной проблемой. Но решения по этому вопросу у меня не работают