Javascript: Сохранять класс, если обновление страницы после прокрутки

Question

Я использую следующий javascript, чтобы добавить класс в верхнее меню после прокрутки страницы на 170 пикселей. Это отлично работает.

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

Проблема происходит на перезагрузки страницы мимо точки 170 пикселей, меню получает класс по умолчанию, пока страница не прокручивается. Этот сайт имеет такую ​​же проблему: 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();