aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHans-Nikolai Viessmann2020-07-27 10:51:04 +0200
committerHans-Nikolai Viessmann2020-07-27 10:51:04 +0200
commita9723f7f6cc87a40ddfc2abc0edc009328b8bee8 (patch)
treed5fdeca1c7e2bc11a9a62ff161dd9107c900086a
parentc53f49542d8c3a7bb1675d0a2364bd60c610a31a (diff)
downloadpelican-theme-edream-a9723f7f6cc87a40ddfc2abc0edc009328b8bee8.tar.gz
pelican-theme-edream-a9723f7f6cc87a40ddfc2abc0edc009328b8bee8.zip
add scrolling nav support
-rw-r--r--static/css/main.css6
-rw-r--r--static/js/scripts.js23
-rw-r--r--templates/base.html2
3 files changed, 31 insertions, 0 deletions
diff --git a/static/css/main.css b/static/css/main.css
index cb33254..8ba942c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -58,6 +58,12 @@ p img {
text-align: right;
}
+.aside-fixed {
+ position: fixed;
+ top: 0;
+ width: inherit;
+}
+
#menu-top {
display: inherit;
}
diff --git a/static/js/scripts.js b/static/js/scripts.js
new file mode 100644
index 0000000..c14120a
--- /dev/null
+++ b/static/js/scripts.js
@@ -0,0 +1,23 @@
+/* we assume that we have JQuery v3 */
+$(document).ready(function() {
+
+ /* we want to scroll-fix side-menu */
+ var aside_menu = $("#menu-aside");
+ var aside_menu_offset = 104; // pixels
+ var didscroll = false;
+
+ $(window).scroll (function() {
+ didscroll = true;
+ });
+
+ setInterval(function () {
+ if (didscroll) {
+ if ($(window).scrollTop() > aside_menu_offset) {
+ aside_menu.addClass('aside-fixed');
+ } else {
+ aside_menu.removeClass('aside-fixed');
+ }
+ didscroll = false;
+ }
+ }, 150);
+});
diff --git a/templates/base.html b/templates/base.html
index 0bccf82..52af9d9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -101,7 +101,9 @@ at the humans.txt file at https://blog.viess.mn/humans.txt for more information.
</div>
</div>
</footer>
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
{% block scripts -%}
{%- endblock scripts %}
+ <script src="{{ SITEURL }}/theme/js/scripts.js"></script>
</body>
</html>