Javascript: Behalten Sie Klasse, wenn Seite nach dem Scrollen aktualisieren

Question

Ich benutze das folgende Javascript, um eine Klasse zu einem Top-Menü hinzufügen, nachdem die Seite 170px gescrollt wurde. Das funktioniert großartig.

$(document).ready(function($) { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 170) { 
      $('header').addClass('shrink'); 
     } 
     else{ 
      $('header').removeClass('shrink'); 
     } 
    }); 
}); 

Das Problem auf Neuladen der Seite vorbei an der 170px Punkt passiert, wird das Menü die Standardklasse, bis die Seite gescrollt wird. Diese Seite hat das gleiche Problem: http://metropolisspasalon.com/ Das Menü ist standardmäßig schwarz und wird nach dem Scrollen weiß. Wenn das Menü weiß ist und Sie die Seite neu laden, wird es wieder schwarz.

Answer 1

fand ich die Antwort, indem Sie dieses Skript: http://callmenick.com/post/animated-resizing-header-on-scroll Hier ist seine "classie.js" Skript:

/*! 
* classie v1.0.0 
* class helper functions 
* from bonzo https://github.com/ded/bonzo 
* MIT license 
* 
* classie.has(elem, 'my-class') -> true/false 
* classie.add(elem, 'my-new-class') 
* classie.remove(elem, 'my-unwanted-class') 
* classie.toggle(elem, 'my-class') 
*/ 

/*jshint browser: true, strict: true, undef: true, unused: true */ 
/*global define: false */ 

(function(window) { 

'use strict'; 

// class helper functions from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at once 
var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
hasClass = function(elem, c) { 
return elem.classList.contains(c); 
}; 
addClass = function(elem, c) { 
elem.classList.add(c); 
}; 
removeClass = function(elem, c) { 
elem.classList.remove(c); 
}; 
} 
else { 
    hasClass = function(elem, c) { 
return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
if (!hasClass(elem, c)) { 
    elem.className = elem.className + ' ' + c; 
} 
    }; 
    removeClass = function(elem, c) { 
elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
var fn = hasClass(elem, c) ? removeClass : addClass; 
fn(elem, c); 
} 

var classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

// transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    // browser global 
    window.classie = classie; 
} 

})(window); 

Und hier ist die JS für den Header:

function init() { 
     window.addEventListener('scroll', function(e){ 
     var distanceY = window.pageYOffset ||  document.documentElement.scrollTop, 
      shrinkOn = 300, 
      header = document.querySelector("header"); 
     if (distanceY > shrinkOn) { 
      classie.add(header,"smaller"); 
     } else { 
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
    }); 
} 
window.onload = init();