Fix sticky alerts that hide information when using anchor links

Course pages may show a sticky alert that the course instance has
ended. The alert may hide information when anchor links are used
since the alert goes on top of the anchor target like a heading.
This commit adds padding to the target so that only empty space
is really covered by the sticky alert at the start before
the user starts to scroll the page.

Fixes apluslms#1207

course/templates/course/course_base.html

@@ -202,6 +202,19 @@ <h4 class="modal-title" id="unenroll-modal-title">
 	</div>
 </div>
 {% endcomment %}
+
+<script>
+$(function() {
+	const hash = window.location.hash;
+	const target = $(hash);
+	const stickyAlert = $('.sticky-alert');
+	if (target.length > 0 && stickyAlert.length > 0) {
+		const alertHeight = stickyAlert[0].offsetHeight;
+		target.css('padding-top', alertHeight + 'px');
+	}
+});
+</script>
+
 {% endblock %}
 
 {% block mobilemenu %}