black icons on scroll on mobile

css/base.css

@@ -285,6 +285,9 @@ html *::selection {
       background-repeat: no-repeat;
       width: 5rem;
       height: 5rem; }
+      .wrapper .header .dis-logo.black {
+        background-image: url(../img/dis-logo-black.png);
+        background-image: url(../img/dis-logo-black.svg); }
       @media (min-width: 769px) {
         .wrapper .header .dis-logo {
           background-image: url(../img/dis-logo-black.png);
@@ -338,6 +341,9 @@ html *::selection {
         .wrapper .header .menubutton-icon {
           background-image: url(../img/dis-plus-black.png);
           background-image: url(../img/dis-plus-black.svg); } }
+      .wrapper .header .menubutton-icon.black {
+        background-image: url(../img/dis-plus-black.png);
+        background-image: url(../img/dis-plus-black.svg); }
     .wrapper .header .kereso-icon {
       background-image: url(../img/kereso_icon-white.png);
       background-image: url(../img/kereso_icon-white.svg); }

js/scripts.js

@@ -132,23 +132,38 @@
 		var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults
 
 
-		/* ========================================================================== */
+		/* -------------------------------------------------------------------------- */
-		/*                                  FUNCTIONS                                 */
+		/*                       Black logo on scroll on mobile                       */
-		/* ========================================================================== */
+		/* -------------------------------------------------------------------------- */
 
+		$.fn.scrollStopped = function (callback) {
+			var that = this, $this = $(that);
+			$this.scroll(function (ev) {
+				clearTimeout($this.data('scrollTimeout'));
+				$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
+			});
+		};
 
-		var rotateMenuButton = function () {
+		var isMenuOpen = function () {
-			if ($(".menubutton button").hasClass("rotated")) {
+			let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false
-				$(".menubutton button").removeClass("rotated");
+			return menuopen
-			} else {
-				$(".menubutton button").addClass("rotated").addClass("inverted");
-			}
 		}
 
+		$(window).scroll(function () {
+			if (isMobile && !isMenuOpen()) {
+				$('.dis-logo, .menubutton-icon').addClass('black')
+			}
+		})
 
-		/* ========================================================================== */
+		$(window).scrollStopped(function () {
+			if (isMobile && !isMenuOpen()) {
+				$('.dis-logo, .menubutton-icon').removeClass('black')
+			}
+		})
+
+		/* -------------------------------------------------------------------------- */
 		/*                                   SEARCH                                   */
-		/* ========================================================================== */
+		/* -------------------------------------------------------------------------- */
 
 		// on mobile add to sidebar:
 		// if (isMobile) {
@@ -182,6 +197,13 @@
 		/*                                    MENU                                    */
 		/* ========================================================================== */
 
+		var rotateMenuButton = function () {
+			if ($(".menubutton button").hasClass("rotated")) {
+				$(".menubutton button").removeClass("rotated");
+			} else {
+				$(".menubutton button").addClass("rotated").addClass("inverted");
+			}
+		}
 
 		function mwCalc() {
 			let ww = calcWidths()
@@ -230,12 +252,12 @@
 				},
 				callbacks: {
 					animation: {
-						open: function (){
+						open: function () {
 							if (isMobile) {
-								$('.social-link, .events-link').removeClass('hidden')	
+								$('.social-link, .events-link').removeClass('hidden')
 							}
 						},
-						close: function () { 
+						close: function () {
 							$(".menubutton button").removeClass("inverted")
 							if (isMobile) {
 								$('.social-link, .events-link').addClass('hidden')
@@ -653,6 +675,8 @@
 			}
 		}
 
+		/* -------------------------- on scroll on desktop -------------------------- */
+
 		var scrolltimer = false;
 		$(window).on('wheel DOMMouseScroll', function (e) {
 			//e.preventDefault();

sass/base.scss

@@ -543,6 +543,10 @@ $v-unit-6: 24rem;
       background-repeat: no-repeat;
       width: $h-unit-1;
       height: $h-unit-1;
+      &.black {
+        background-image: url(../img/dis-logo-black.png);
+        background-image: url(../img/dis-logo-black.svg);
+      }
 
       @media #{$tablet} {
         background-image: url(../img/dis-logo-black.png);
@@ -596,6 +600,10 @@ $v-unit-6: 24rem;
 
     .menubutton-icon {
       @include bw-icon(dis-plus);
+      &.black {
+        background-image: url(../img/dis-plus-black.png);
+        background-image: url(../img/dis-plus-black.svg);
+      }
     }
 
     .kereso-icon {