Javascript：スクロール後にページを更新するとクラスを保持する

Question

次のjavascriptを使用して、ページを170pxスクロールした後にトップメニューにクラスを追加しています。これは素晴らしいです。

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

問題が170pxのポイントを過ぎてページをリロードに起こるページがスクロールされるまで、メニューはデフォルトのクラスを取得します。このサイトには同じ問題があります：http://metropolisspasalon.com/メニューはデフォルトで黒で、スクロール後に白くなります。メニューが白でページをリロードすると、再び黒に変わります。

Answer 1

私はこのスクリプト使って、答えが見つかりました：ここにhttp://callmenick.com/post/animated-resizing-header-on-scrollは彼の "classie.js" スクリプトです：

/*! 
* 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); 

そしてここでは、JSは、ヘッダーのためです：

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();