Javascript：滚动后页面刷新保留class

Question

我正在使用以下 javascript 在页面滚动 170 像素后将 class 添加到顶部菜单。这很好用。

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

问题发生在重新加载超过 170 像素点的页面时，菜单会使用默认值 class，直到页面滚动。这个站点有同样的问题： 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 );

这是 header 的 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();

Javascript：滚动后页面刷新保留class

Javascript: Retain class if page refresh after scrolling

javascript

scroll

class

retain