Color Slider Gradient

Color Slider Gradient - javascript

I am trying to create a Lab color space slider with a dynamic gradient on the slider. I successfully created the slider (with the help of this library).
I'm having trouble creating the gradients for it. Here's the code relevant to the gradient creation:
setGradient(slider[0], "right", [Laba2cssString(0, Lab.a, Lab.b), Laba2cssString(100, Lab.a, Lab.b)]);
setGradient(slider[1], "right", [Laba2cssString(Lab.L, -128, Lab.b), Laba2cssString(Lab.L, 128, Lab.b)]);
setGradient(slider[2], "right", [Laba2cssString(Lab.L, Lab.a, -128), Laba2cssString(Lab.L, Lab.a, 128)]);
They work as they should, but the colors for A and B (Lab) are wrong. What's the correct way to generate the correct gradient colors?
Here's a website of how the colors should look: colorizer.org
codePen
var myColor = new Colors(),
overallSlidersWrapper = document.getElementById('overallSlidersWrapper'),
slider = document.getElementsByClassName('slider'),
type,
mode,
isLabAB = false,
currentModeType,
startPoint,
currentTarget,
currentTargetWidth,
maxReal = {
Lab: {
L: 100,
a: 256,
b: 256
}
};
var toCSSstring = {
Lab: Laba2cssString
};
var sliderDown = function(e) {
e.preventDefault();
if (e.target.classList.contains('sliderRange') || e.target.classList.contains('sliderCursor')) currentTarget = e.target.parentNode;
else if (e.target.classList.contains('slider')) currentTarget = e.target;
else if (e.target.classList.contains('leftRoundness')) currentTarget = e.target.nextElementSibling;
else if (e.target.classList.contains('rightRoundness')) currentTarget = e.target.previousElementSibling;
else return;
currentModeType = getModeType(currentTarget);
type = currentModeType.type;
mode = currentModeType.mode;
isLabAB = currentModeType.isLabAB;
startPoint = getOrigin(currentTarget);
sliderMove(e);
addEvent(window, 'mousemove', sliderMove);
startRender();
},
sliderMove = function(e) {
var newColor = {};
newColor[mode] = (e.clientX - startPoint.left) /
currentTarget.offsetWidth * maxReal[type][mode] - (isLabAB ? 128 : 0);
myColor.setColor(newColor, type);
};
renderColorSliders = function(color) {
for (var n = slider.length; n--;) {
var currentModeType = getModeType(slider[n]),
localType = currentModeType.type,
localMode = currentModeType.mode,
isLabAB = currentModeType.isLabAB;
var colorNumber = myColor.colors.RND[localType][localMode],
percentPosition = (((colorNumber / maxReal[localType][localMode]) + (isLabAB ? 0.5 : 0)) *
slider[n].offsetWidth) - 7;
var colorNumber = (localMode === 'alpha') ? myColor.colors.alpha : myColor.colors.RND[localType][localMode],
percentPosition = (((colorNumber / maxReal[localType][localMode]) + (isLabAB ? 0.5 : 0)) *
slider[n].offsetWidth) - 7;
slider[n].firstElementChild.style.transform = 'translateX(' + percentPosition + 'px)';
slider[n].firstElementChild.style.borderColor = color.RGBLuminance > 0.22 ? 'black' : 'white';
}
};
var result = document.getElementById('result');
function renderResult(color) {
result.style.backgroundColor = rgba2cssString(color.RND.rgb.r, color.RND.rgb.g, color.RND.rgb.b);
}
function renderGradients(color) {
Lab = color.RND.Lab;
setGradient(slider[0], "right", [Laba2cssString(0, Lab.a, Lab.b), Laba2cssString(100, Lab.a, Lab.b)]);
setGradient(slider[1], "right", [Laba2cssString(Lab.L, -128, Lab.b), Laba2cssString(Lab.L, 128, Lab.b)]);
setGradient(slider[2], "right", [Laba2cssString(Lab.L, Lab.a, -128), Laba2cssString(Lab.L, Lab.a, 128)]);
slider[0].previousElementSibling.style.backgroundColor = Laba2cssString(0, Lab.a, Lab.b);
slider[0].nextElementSibling.style.backgroundColor = Laba2cssString(100, Lab.a, Lab.b);
slider[1].previousElementSibling.style.backgroundColor = Laba2cssString(Lab.L, -128, Lab.b);
slider[1].nextElementSibling.style.backgroundColor = Laba2cssString(Lab.L, 128, Lab.b);
slider[2].previousElementSibling.style.backgroundColor = Laba2cssString(Lab.L, Lab.a, -128);
slider[2].nextElementSibling.style.backgroundColor = Laba2cssString(Lab.L, Lab.a, 128);
}
addEvent(overallSlidersWrapper, 'mousedown', sliderDown);
function removeMouseUpEvents() {
removeEvent(window, 'mousemove', sliderMove);
stopRender();
}
addEvent(window, 'mouseup', removeMouseUpEvents);
var doRender = function(color) {
renderColorSliders(color);
renderResult(color);
renderGradients(color);
},
renderTimer,
startRender = function() {
renderTimer = setInterval(function() {
doRender(myColor.colors);
// http://stackoverflow.com/questions/2940054/
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
},
stopRender = function() {
clearInterval(renderTimer);
};
doRender(myColor.colors);
/*-----------------------------*/
/*------ Function Helpers -----*/
/*-----------------------------*/
function getOrigin(elm) {
var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
top: 0,
left: 0
},
doc = elm && elm.ownerDocument,
body = doc.body,
win = doc.defaultView || doc.parentWindow || window,
docElem = doc.documentElement || body.parentNode,
clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
clientLeft = docElem.clientLeft || body.clientLeft || 0;
return {
left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
};
}
function addEvent(obj, type, func) {
addEvent.cache = addEvent.cache || {
_get: function(obj, type, func, checkOnly) {
var cache = addEvent.cache[type] || [];
for (var n = cache.length; n--;) {
if (obj === cache[n].obj && '' + func === '' + cache[n].func) {
func = cache[n].func;
if (!checkOnly) {
cache[n] = cache[n].obj = cache[n].func = null;
cache.splice(n, 1);
}
return func;
}
}
},
_set: function(obj, type, func) {
var cache = addEvent.cache[type] = addEvent.cache[type] || [];
if (addEvent.cache._get(obj, type, func, true)) {
return true;
} else {
cache.push({
func: func,
obj: obj
});
}
}
};
if (!func.name && addEvent.cache._set(obj, type, func) || typeof func !== 'function') {
return;
}
if (obj.addEventListener) obj.addEventListener(type, func, false);
else obj.attachEvent('on' + type, func);
}
function removeEvent(obj, type, func) {
if (typeof func !== 'function') return;
if (!func.name) {
func = addEvent.cache._get(obj, type, func) || func;
}
if (obj.removeEventListener) obj.removeEventListener(type, func, false);
else obj.detachEvent('on' + type, func);
}
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function getModeType(elem) {
var id = elem.id, // rgbR
len = id.length - 1, // 3
type = id.substr(0, len), // rgb
mode = id.charAt(len), // r
isLabAB = type === 'Lab' && (/(?:a|b)/.test(mode)); //is 'Lab && ()'a' || 'b')
if (elem.id === 'rgbA') mode = 'alpha';
return {
type: type,
mode: mode,
isLabAB: isLabAB
};
}
/**
* Formats the given RGB values into a string that can be used in CSS
*/
function rgba2cssString(r, g, b, a) {
if (r == null) return;
if (isObject(r)) r = Object.keys(r).map(function(key) {
return r[key]
});
if (Array.isArray(r)) {
// Check if array doesn't have alpha
if (r.length === 3) return rgba2cssString(r[0], r[1], r[2]);
// Check if array has alpha
else if (r.length === 4) return rgba2cssString(r[0], r[1], r[2], r[3]);
}
if (a || a === 0) return "rgba(" + r + "," + g + "," + b + "," + a + ")";
return "rgb(" + r + "," + g + "," + b + ")";
}
/**
* Formats the given HSL values into a string that can be used in CSS
*/
function hsla2cssString(h, s, l, a) {
if (h == null) return;
if (isObject(h)) h = Object.keys(h).map(function(key) {
return h[key]
});
if (Array.isArray(h)) {
// Check if array doesn't have alpha
if (h.length === 3) return rgba2cssString(h[0], h[1], h[2]);
// Check if array has alpha
else if (h.length === 4) return rgba2cssString(h[0], h[1], h[2], h[3]);
}
if (a || a === 0) return "hsla(" + h + "," + s + "%," + l + "%," + a + ")";
return "hsl(" + h + "," + s + "%," + l + "%)";
}
/**
* Formats the given HSV values into a string that can be used in CSS
*/
function hsva2cssString(h, s, v, a) {
if (h == null) return;
var hsvObject,
alpha;
if (isObject(h)) {
hsvObject = h;
alpha = h.a;
} else if (Array.isArray(h)) {
hsvObject = {
h: h[0],
s: h[1],
v: h[2]
};
alpha = h[3];
} else if (s != null) {
hsvObject = {
h: h,
s: s,
v: v
};
alpha = a;
}
var rgbColor = myColor.convertColor(hsvObject, 'HSV2RGB');
rgbColor.a = alpha;
return rgba2cssString(rgbColor);
}
/**
* Formats the given Lab values into a string that can be used in CSS
*/
function Laba2cssString(L, a, b, alpha) {
if (L == null) return;
var LabObject,
alphaLocal;
if (isObject(L)) {
LabObject = L;
alphaLocal = L.alpha;
} else if (Array.isArray(L)) {
LabObject = {
L: L[0],
a: L[1],
b: L[2]
};
alphaLocal = L[3];
} else if (a != null) {
LabObject = {
L: L,
a: a,
b: b
};
alphaLocal = alpha;
}
var rgbColor = myColor.convertColor(LabObject, 'Lab2RGB');
rgbColor.a = alpha;
return rgba2cssString(rgbColor);
}
function setGradient(el, direction, steps, multipleBG) {
var gradientString = "linear-gradient(to " + direction + ",";
stepSize = 100 / (steps.length - 1);
for (var i = 0; i < steps.length; i++) {
gradientString += (i > 0 ? "," : "") + steps[i] + (i * stepSize) + "%";
}
gradientString += ")";
if (multipleBG) {
gradientString += ', ' + multipleBG;
}
el.style.backgroundImage = gradientString;
}
function isObject(obj) {
return (typeof obj === "object" && !Array.isArray(obj) && obj !== null);
}
#overallSlidersWrapper {
width: 500px;
}
.sliderContent {
height: 138px;
}
.colorSliderTabsLabel {
width: calc(100% /4);
display: inline-block;
text-align: center;
cursor: pointer;
}
#colorSliderTabUnderliner {
height: 3px;
width: calc(100% /4);
background-color: green;
transition: transform 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
#tabContentWrapper {
width: 680px;
align-items: flex-start;
position: relative;
}
#overallSlidersWrapper {} .sliderOuterWrapper {
margin-bottom: 10px;
}
.sliderLabel {} .sliderInnerWrapper {
height: 18px;
width: 100%;
cursor: pointer;
position: relative;
display: flex;
}
.slider {
height: 100%;
width: calc(100% - 62px);
/* Subtract TextField (44px) and Both Rounders for Slider (19px each)*/
position: relative;
border: 1px solid black;
border-right: none;
border-left: none;
}
.leftRoundness,
.rightRoundness {
width: 9px;
height: 100%;
border: 1px solid black;
}
.leftRoundness {
border-right: none;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rightRoundness {
border-left: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.sliderCursor {
width: 14px;
height: 14px;
border-radius: 50%;
position: relative;
border: 2px solid black;
}
#result {
width: 100px;
height: 100px;
}
<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<div id="result"></div>
<div id="overallSlidersWrapper">
<div id="LabSliderContent" class="sliderContent">
<div class="sliderOuterWrapper">
<div class="sliderLabel">Lightness</div>
<div class="sliderInnerWrapper">
<div class="leftRoundness"></div>
<div id="LabL" class="slider">
<div class="sliderCursor"></div>
</div>
<div class="rightRoundness"></div>
</div>
</div>
<div class="sliderOuterWrapper">
<div class="sliderLabel">a (Green ↔ Red)</div>
<div class="sliderInnerWrapper">
<div class="leftRoundness"></div>
<div id="Laba" class="slider">
<div class="sliderCursor"></div>
</div>
<div class="rightRoundness"></div>
</div>
</div>
<div class="sliderOuterWrapper">
<div class="sliderLabel">b (Blue ↔ Yellow)</div>
<div class="sliderInnerWrapper">
<div class="leftRoundness"></div>
<div id="Labb" class="slider">
<div class="sliderCursor"></div>
</div>
<div class="rightRoundness"></div>
</div>
</div>
</div>
</div>

setgradient make a gradient going through the points you define. In your code, you just define the colors in the corners of your slider, so everything in the middle is out of control for you. You can improve the result by adding more points in the way of the gradient as:
setGradient(slider[0], "right", [Laba2cssString(0, Lab.a, Lab.b), Laba2cssString(50, Lab.a, Lab.b), Laba2cssString(100, Lab.a, Lab.b)]);
setGradient(slider[1], "right", [Laba2cssString(Lab.L, -128, Lab.b),Laba2cssString(Lab.L, -0, Lab.b), Laba2cssString(Lab.L, 128, Lab.b)]);
setGradient(slider[2], "right", [Laba2cssString(Lab.L, Lab.a, -128),Laba2cssString(Lab.L, Lab.a, -0), Laba2cssString(Lab.L, Lab.a, 128)]);
The more points you add, the better the sliderbar would look like.

Related

how to change header color with midnight.js

I would like to change the color of the menu letters.
However, some problems arise.
The problem is that when I enter this jquery code the menu gets all centered
https://imgur.com/4196CgN
The goal of this jquery is to change the color of the header when it arrives in another section by assigning it a class.
If the header is between two sections, above it takes the color of the previous section, and below it takes the color of the next section.
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){var e=0,s=Array.prototype.slice;t.cleanData=function(e){return function(s){var i,n,o;for(o=0;null!=(n=s[o]);o++)try{i=t._data(n,"events"),i&&i.remove&&t(n).triggerHandler("remove")}catch(r){}e(s)}}(t.cleanData),t.widget=function(e,s,i){var n,o,r,a,h={},d=e.split(".")[0];return e=e.split(".")[1],n=d+"-"+e,i||(i=s,s=t.Widget),t.expr[":"][n.toLowerCase()]=function(e){return!!t.data(e,n)},t[d]=t[d]||{},o=t[d][e],r=t[d][e]=function(t,e){return this._createWidget?void(arguments.length&&this._createWidget(t,e)):new r(t,e)},t.extend(r,o,{version:i.version,_proto:t.extend({},i),_childConstructors:[]}),a=new s,a.options=t.widget.extend({},a.options),t.each(i,function(e,i){return t.isFunction(i)?void(h[e]=function(){var t=function(){return s.prototype[e].apply(this,arguments)},n=function(t){return s.prototype[e].apply(this,t)};return function(){var e,s=this._super,o=this._superApply;return this._super=t,this._superApply=n,e=i.apply(this,arguments),this._super=s,this._superApply=o,e}}()):void(h[e]=i)}),r.prototype=t.widget.extend(a,{widgetEventPrefix:o?a.widgetEventPrefix||e:e},h,{constructor:r,namespace:d,widgetName:e,widgetFullName:n}),o?(t.each(o._childConstructors,function(e,s){var i=s.prototype;t.widget(i.namespace+"."+i.widgetName,r,s._proto)}),delete o._childConstructors):s._childConstructors.push(r),t.widget.bridge(e,r),r},t.widget.extend=function(e){for(var i,n,o=s.call(arguments,1),r=0,a=o.length;a>r;r++)for(i in o[r])n=o[r][i],o[r].hasOwnProperty(i)&&void 0!==n&&(e[i]=t.isPlainObject(n)?t.isPlainObject(e[i])?t.widget.extend({},e[i],n):t.widget.extend({},n):n);return e},t.widget.bridge=function(e,i){var n=i.prototype.widgetFullName||e;t.fn[e]=function(o){var r="string"==typeof o,a=s.call(arguments,1),h=this;return o=!r&&a.length?t.widget.extend.apply(null,[o].concat(a)):o,r?this.each(function(){var s,i=t.data(this,n);return"instance"===o?(h=i,!1):i?t.isFunction(i[o])&&"_"!==o.charAt(0)?(s=i[o].apply(i,a),s!==i&&void 0!==s?(h=s&&s.jquery?h.pushStack(s.get()):s,!1):void 0):t.error("no such method '"+o+"' for "+e+" widget instance"):t.error("cannot call methods on "+e+" prior to initialization; attempted to call method '"+o+"'")}):this.each(function(){var e=t.data(this,n);e?(e.option(o||{}),e._init&&e._init()):t.data(this,n,new i(o,this))}),h}},t.Widget=function(){},t.Widget._childConstructors=[],t.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"<div>",options:{disabled:!1,create:null},_createWidget:function(s,i){i=t(i||this.defaultElement||this)[0],this.element=t(i),this.uuid=e++,this.eventNamespace="."+this.widgetName+this.uuid,this.bindings=t(),this.hoverable=t(),this.focusable=t(),i!==this&&(t.data(i,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===i&&this.destroy()}}),this.document=t(i.style?i.ownerDocument:i.document||i),this.window=t(this.document[0].defaultView||this.document[0].parentWindow)),this.options=t.widget.extend({},this.options,this._getCreateOptions(),s),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:t.noop,_getCreateEventData:t.noop,_create:t.noop,_init:t.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:t.noop,widget:function(){return this.element},option:function(e,s){var i,n,o,r=e;if(0===arguments.length)return t.widget.extend({},this.options);if("string"==typeof e)if(r={},i=e.split("."),e=i.shift(),i.length){for(n=r[e]=t.widget.extend({},this.options[e]),o=0;i.length-1>o;o++)n[i[o]]=n[i[o]]||{},n=n[i[o]];if(e=i.pop(),1===arguments.length)return void 0===n[e]?null:n[e];n[e]=s}else{if(1===arguments.length)return void 0===this.options[e]?null:this.options[e];r[e]=s}return this._setOptions(r),this},_setOptions:function(t){var e;for(e in t)this._setOption(e,t[e]);return this},_setOption:function(t,e){return this.options[t]=e,"disabled"===t&&(this.widget().toggleClass(this.widgetFullName+"-disabled",!!e),e&&(this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus"))),this},enable:function(){return this._setOptions({disabled:!1})},disable:function(){return this._setOptions({disabled:!0})},_on:function(e,s,i){var n,o=this;"boolean"!=typeof e&&(i=s,s=e,e=!1),i?(s=n=t(s),this.bindings=this.bindings.add(s)):(i=s,s=this.element,n=this.widget()),t.each(i,function(i,r){function a(){return e||o.options.disabled!==!0&&!t(this).hasClass("ui-state-disabled")?("string"==typeof r?o[r]:r).apply(o,arguments):void 0}"string"!=typeof r&&(a.guid=r.guid=r.guid||a.guid||t.guid++);var h=i.match(/^([\w:-]*)\s*(.*)$/),d=h[1]+o.eventNamespace,l=h[2];l?n.delegate(l,d,a):s.bind(d,a)})},_off:function(e,s){s=(s||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,e.unbind(s).undelegate(s),this.bindings=t(this.bindings.not(e).get()),this.focusable=t(this.focusable.not(e).get()),this.hoverable=t(this.hoverable.not(e).get())},_delay:function(t,e){function s(){return("string"==typeof t?i[t]:t).apply(i,arguments)}var i=this;return setTimeout(s,e||0)},_hoverable:function(e){this.hoverable=this.hoverable.add(e),this._on(e,{mouseenter:function(e){t(e.currentTarget).addClass("ui-state-hover")},mouseleave:function(e){t(e.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(e){this.focusable=this.focusable.add(e),this._on(e,{focusin:function(e){t(e.currentTarget).addClass("ui-state-focus")},focusout:function(e){t(e.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(e,s,i){var n,o,r=this.options[e];if(i=i||{},s=t.Event(s),s.type=(e===this.widgetEventPrefix?e:this.widgetEventPrefix+e).toLowerCase(),s.target=this.element[0],o=s.originalEvent)for(n in o)n in s||(s[n]=o[n]);return this.element.trigger(s,i),!(t.isFunction(r)&&r.apply(this.element[0],[s].concat(i))===!1||s.isDefaultPrevented())}},t.each({show:"fadeIn",hide:"fadeOut"},function(e,s){t.Widget.prototype["_"+e]=function(i,n,o){"string"==typeof n&&(n={effect:n});var r,a=n?n===!0||"number"==typeof n?s:n.effect||s:e;n=n||{},"number"==typeof n&&(n={duration:n}),r=!t.isEmptyObject(n),n.complete=o,n.delay&&i.delay(n.delay),r&&t.effects&&t.effects.effect[a]?i[e](n):a!==e&&i[a]?i[a](n.duration,n.easing,o):i.queue(function(s){t(this)[e](),o&&o.call(i[0]),s()})}}),t.widget}),function(t){"use strict";t.widget("aerolab.midnight",{options:{headerClass:"midnightHeader",innerClass:"midnightInner",defaultClass:"default",classPrefix:"",sectionSelector:"midnight"},_headers:{},_headerInfo:{top:0,height:0},_$sections:[],_sections:[],_scrollTop:0,_documentHeight:0,_transformMode:!1,refresh:function(){this._headerInfo={top:0,height:this.element.outerHeight()},this._$sections=t("[data-"+this.options.sectionSelector+"]:not(:hidden)"),this._sections=[],this._setupHeaders(),this.recalculate()},_create:function(){var e=this;this._scrollTop=window.pageYOffset||document.documentElement.scrollTop,this._documentHeight=t(document).height(),this._headers={},this._transformMode=this._getSupportedTransform(),this.refresh(),setInterval(function(){e._recalculateSections()},1e3),e.recalculate(),t(window).resize(function(){e.recalculate()}),this._updateHeadersLoop()},recalculate:function(){this._recalculateSections(),this._updateHeaderHeight(),this._recalculateHeaders(),this._updateHeaders()},_getSupportedTransform:function(){for(var t=["transform","WebkitTransform","MozTransform","OTransform","msTransform"],e=0;e<t.length;e++)if(void 0!==document.createElement("div").style[t[e]])return t[e];return!1},_getContainerHeight:function(){var e=this.element.find("> ."+this.options.headerClass),s=0,i=0,n=this;return e.length?e.each(function(){var e=t(this),o=e.find("> ."+n.options.innerClass);o.length?(o.css("bottom","auto").css("overflow","auto"),i=o.outerHeight(),o.css("bottom","0")):(e.css("bottom","auto"),i=e.outerHeight(),e.css("bottom","0")),s=i>s?i:s}):s=i=this.element.outerHeight(),s},_setupHeaders:function(){var e=this;this._headers[this.options.defaultClass]={};for(var s=0;s<this._$sections.length;s++){var i=t(this._$sections[s]),n=i.data(this.options.sectionSelector);"string"==typeof n&&(n=n.trim(),""!==n&&(e._headers[n]={}))}({top:this.element.css("padding-top"),right:this.element.css("padding-right"),bottom:this.element.css("padding-bottom"),left:this.element.css("padding-left")});this.element.css({position:"fixed",top:0,left:0,right:0,overflow:"hidden"}),this._updateHeaderHeight();var o=this.element.find("> ."+this.options.headerClass);o.length?o.filter("."+this.options.defaultClass).length||o.filter("."+this.options.headerClass+":first").clone(!0,!0).attr("class",this.options.headerClass+" "+this.options.defaultClass):this.element.wrapInner('<div class="'+this.options.headerClass+" "+this.options.defaultClass+'"></div>');var o=this.element.find("> ."+this.options.headerClass),r=o.filter("."+this.options.defaultClass).clone(!0,!0);for(var n in this._headers)if(this._headers.hasOwnProperty(n)&&"undefined"==typeof this._headers[n].element){var a=o.filter("."+n);a.length?this._headers[n].element=a:this._headers[n].element=r.clone(!0,!0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);var h={position:"absolute",overflow:"hidden",top:0,left:0,right:0,bottom:0};this._headers[n].element.css(h),this._transformMode!==!1&&this._headers[n].element.css(this._transformMode,"translateZ(0)"),this._headers[n].element.find("> ."+this.options.innerClass).length||this._headers[n].element.wrapInner('<div class="'+this.options.innerClass+'"></div>'),this._headers[n].inner=this._headers[n].element.find("> ."+this.options.innerClass),this._headers[n].inner.css(h),this._transformMode!==!1&&this._headers[n].inner.css(this._transformMode,"translateZ(0)"),this._headers[n].from="",this._headers[n].progress=0}o.each(function(){var s=t(this),i=!1;for(var n in e._headers)e._headers.hasOwnProperty(n)&&s.hasClass(n)&&(i=!0);s.find("> ."+e.options.innerClass).length||s.wrapInner('<div class="'+e.options.innerClass+'"></div>'),i?s.show():s.hide()})},_recalculateHeaders:function(){this._scrollTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,this._scrollTop=Math.max(this._scrollTop,0),this._scrollTop=Math.min(this._scrollTop,this._documentHeight);var t=this._headerInfo.height,e=this._scrollTop+this._headerInfo.top,s=e+t;if("function"==typeof window.getComputedStyle){var i=window.getComputedStyle(this.element[0],null),n=0,o=0;if(this._transformMode!==!1&&"string"==typeof i.transform){var r=i.transform.match(/(-?[0-9\.]+)/g);null!==r&&r.length>=6&&!isNaN(parseFloat(r[5]))&&(o=parseFloat(r[5]))}i.top.indexOf("px")>=0&&!isNaN(parseFloat(i.top))&&(n=parseFloat(i.top)),e+=n+o,s+=n+o}for(var a in this._headers)this._headers.hasOwnProperty(a)&&(this._headers[a].from="",this._headers[a].progress=0);for(var h=0;h<this._sections.length;h++)s>=this._sections[h].start&&e<=this._sections[h].end&&(this._headers[this._sections[h].className].visible=!0,e>=this._sections[h].start&&s<=this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress+=1):s>this._sections[h].end&&e<this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress=1-(s-this._sections[h].end)/t):s>this._sections[h].start&&e<this._sections[h].start&&("top"===this._headers[this._sections[h].className].from?this._headers[this._sections[h].className].progress+=(s-this._sections[h].start)/t:(this._headers[this._sections[h].className].from="bottom",this._headers[this._sections[h].className].progress=(s-this._sections[h].start)/t)))},_updateHeaders:function(){if("undefined"!=typeof this._headers[this.options.defaultClass]){var t=0,e="";for(var s in this._headers)this._headers.hasOwnProperty(s)&&""!==!this._headers[s].from&&(t+=this._headers[s].progress,e=s);t<1&&(""===this._headers[this.options.defaultClass].from?(this._headers[this.options.defaultClass].from="top"===this._headers[e].from?"bottom":"top",this._headers[this.options.defaultClass].progress=1-t):this._headers[this.options.defaultClass].progress+=1-t);for(var i in this._headers)if(this._headers.hasOwnProperty(i)&&""!==!this._headers[i].from){var n=100*(1-this._headers[i].progress);n>=100&&(n=110),n<=-100&&(n=-110),"top"===this._headers[i].from?this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="-"+n+"%",this._headers[i].inner[0].style.top="+"+n+"%"):this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="+"+n+"%",this._headers[i].inner[0].style.top="-"+n+"%")}}},_recalculateSections:function(){this._documentHeight=t(document).height(),this._sections=[];for(var e=0;e<this._$sections.length;e++){var s=t(this._$sections[e]);this._sections.push({element:s,className:s.data(this.options.sectionSelector),start:s.offset().top,end:s.offset().top+s.outerHeight()})}},_updateHeaderHeight:function(){this._headerInfo.height=this._getContainerHeight(),this.element.css("height",this._headerInfo.height+"px")},_updateHeadersLoop:function(){var t=this;this._requestAnimationFrame(function(){t._updateHeadersLoop()}),this._recalculateHeaders(),this._updateHeaders()},_requestAnimationFrame:function(t){var e=e||function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();e(t)}})}(jQuery);
body{font-family: 'Inter', sans-serif; font-size: 16px;}
/* base style */
a{text-decoration: none}
h1,h2,h3,h4,h5,h6,p,i{color: #000; padding-bottom: 30px;}
p{line-height: 28px; font-weight: 300px; color: #666;}
.big-text{ font-size: 70px; font-weight: 900;}
.medium-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px}
.intro-text{ text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{ background: #316bff; padding: 18px 28px; color: #fff; display: inline-block; border-radius: 4px;}
.subtitle{color: #000; text-decoration: underline;}
/* header */
.header{
width: 100%;
position:fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default{; color: #000;}
.white{ color: red;}
.menu{width: 100%; color: #fff; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.menu li{display: inline-block; }
.menu li a{;display: block; padding: 15px; color: #000; font-weight: 700;}
/* hero */
.hero{
background: linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.6)),
url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster{
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1{margin-top: 50px;}
.mt-2{margin-top: 100px;}
.mt-3{margin-top: 150px;}
.tw{color: #fff;}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default" >
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function(){
// Change this to the correct selector.
$('.menu li a').midnight();
});
</script>

If I understood correctly you can use CSS to do this:
.white ul li a {
color: white;
}
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
! function(t) {
"function" == typeof define && define.amd ? define(["jquery"], t) : t(jQuery)
}(function(t) {
var e = 0,
s = Array.prototype.slice;
t.cleanData = function(e) {
return function(s) {
var i, n, o;
for (o = 0; null != (n = s[o]); o++) try {
i = t._data(n, "events"), i && i.remove && t(n).triggerHandler("remove")
} catch (r) {}
e(s)
}
}(t.cleanData), t.widget = function(e, s, i) {
var n, o, r, a, h = {},
d = e.split(".")[0];
return e = e.split(".")[1], n = d + "-" + e, i || (i = s, s = t.Widget), t.expr[":"][n.toLowerCase()] = function(e) {
return !!t.data(e, n)
}, t[d] = t[d] || {}, o = t[d][e], r = t[d][e] = function(t, e) {
return this._createWidget ? void(arguments.length && this._createWidget(t, e)) : new r(t, e)
}, t.extend(r, o, {
version: i.version,
_proto: t.extend({}, i),
_childConstructors: []
}), a = new s, a.options = t.widget.extend({}, a.options), t.each(i, function(e, i) {
return t.isFunction(i) ? void(h[e] = function() {
var t = function() {
return s.prototype[e].apply(this, arguments)
},
n = function(t) {
return s.prototype[e].apply(this, t)
};
return function() {
var e, s = this._super,
o = this._superApply;
return this._super = t, this._superApply = n, e = i.apply(this, arguments), this._super = s, this._superApply = o, e
}
}()) : void(h[e] = i)
}), r.prototype = t.widget.extend(a, {
widgetEventPrefix: o ? a.widgetEventPrefix || e : e
}, h, {
constructor: r,
namespace: d,
widgetName: e,
widgetFullName: n
}), o ? (t.each(o._childConstructors, function(e, s) {
var i = s.prototype;
t.widget(i.namespace + "." + i.widgetName, r, s._proto)
}), delete o._childConstructors) : s._childConstructors.push(r), t.widget.bridge(e, r), r
}, t.widget.extend = function(e) {
for (var i, n, o = s.call(arguments, 1), r = 0, a = o.length; a > r; r++)
for (i in o[r]) n = o[r][i], o[r].hasOwnProperty(i) && void 0 !== n && (e[i] = t.isPlainObject(n) ? t.isPlainObject(e[i]) ? t.widget.extend({}, e[i], n) : t.widget.extend({}, n) : n);
return e
}, t.widget.bridge = function(e, i) {
var n = i.prototype.widgetFullName || e;
t.fn[e] = function(o) {
var r = "string" == typeof o,
a = s.call(arguments, 1),
h = this;
return o = !r && a.length ? t.widget.extend.apply(null, [o].concat(a)) : o, r ? this.each(function() {
var s, i = t.data(this, n);
return "instance" === o ? (h = i, !1) : i ? t.isFunction(i[o]) && "_" !== o.charAt(0) ? (s = i[o].apply(i, a), s !== i && void 0 !== s ? (h = s && s.jquery ? h.pushStack(s.get()) : s, !1) : void 0) : t.error("no such method '" + o + "' for " + e + " widget instance") : t.error("cannot call methods on " + e + " prior to initialization; attempted to call method '" + o + "'")
}) : this.each(function() {
var e = t.data(this, n);
e ? (e.option(o || {}), e._init && e._init()) : t.data(this, n, new i(o, this))
}), h
}
}, t.Widget = function() {}, t.Widget._childConstructors = [], t.Widget.prototype = {
widgetName: "widget",
widgetEventPrefix: "",
defaultElement: "<div>",
options: {
disabled: !1,
create: null
},
_createWidget: function(s, i) {
i = t(i || this.defaultElement || this)[0], this.element = t(i), this.uuid = e++, this.eventNamespace = "." + this.widgetName + this.uuid, this.bindings = t(), this.hoverable = t(), this.focusable = t(), i !== this && (t.data(i, this.widgetFullName, this), this._on(!0, this.element, {
remove: function(t) {
t.target === i && this.destroy()
}
}), this.document = t(i.style ? i.ownerDocument : i.document || i), this.window = t(this.document[0].defaultView || this.document[0].parentWindow)), this.options = t.widget.extend({}, this.options, this._getCreateOptions(), s), this._create(), this._trigger("create", null, this._getCreateEventData()), this._init()
},
_getCreateOptions: t.noop,
_getCreateEventData: t.noop,
_create: t.noop,
_init: t.noop,
destroy: function() {
this._destroy(), this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)), this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName + "-disabled ui-state-disabled"), this.bindings.unbind(this.eventNamespace), this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus")
},
_destroy: t.noop,
widget: function() {
return this.element
},
option: function(e, s) {
var i, n, o, r = e;
if (0 === arguments.length) return t.widget.extend({}, this.options);
if ("string" == typeof e)
if (r = {}, i = e.split("."), e = i.shift(), i.length) {
for (n = r[e] = t.widget.extend({}, this.options[e]), o = 0; i.length - 1 > o; o++) n[i[o]] = n[i[o]] || {}, n = n[i[o]];
if (e = i.pop(), 1 === arguments.length) return void 0 === n[e] ? null : n[e];
n[e] = s
} else {
if (1 === arguments.length) return void 0 === this.options[e] ? null : this.options[e];
r[e] = s
}
return this._setOptions(r), this
},
_setOptions: function(t) {
var e;
for (e in t) this._setOption(e, t[e]);
return this
},
_setOption: function(t, e) {
return this.options[t] = e, "disabled" === t && (this.widget().toggleClass(this.widgetFullName + "-disabled", !!e), e && (this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus"))), this
},
enable: function() {
return this._setOptions({
disabled: !1
})
},
disable: function() {
return this._setOptions({
disabled: !0
})
},
_on: function(e, s, i) {
var n, o = this;
"boolean" != typeof e && (i = s, s = e, e = !1), i ? (s = n = t(s), this.bindings = this.bindings.add(s)) : (i = s, s = this.element, n = this.widget()), t.each(i, function(i, r) {
function a() {
return e || o.options.disabled !== !0 && !t(this).hasClass("ui-state-disabled") ? ("string" == typeof r ? o[r] : r).apply(o, arguments) : void 0
}
"string" != typeof r && (a.guid = r.guid = r.guid || a.guid || t.guid++);
var h = i.match(/^([\w:-]*)\s*(.*)$/),
d = h[1] + o.eventNamespace,
l = h[2];
l ? n.delegate(l, d, a) : s.bind(d, a)
})
},
_off: function(e, s) {
s = (s || "").split(" ").join(this.eventNamespace + " ") + this.eventNamespace, e.unbind(s).undelegate(s), this.bindings = t(this.bindings.not(e).get()), this.focusable = t(this.focusable.not(e).get()), this.hoverable = t(this.hoverable.not(e).get())
},
_delay: function(t, e) {
function s() {
return ("string" == typeof t ? i[t] : t).apply(i, arguments)
}
var i = this;
return setTimeout(s, e || 0)
},
_hoverable: function(e) {
this.hoverable = this.hoverable.add(e), this._on(e, {
mouseenter: function(e) {
t(e.currentTarget).addClass("ui-state-hover")
},
mouseleave: function(e) {
t(e.currentTarget).removeClass("ui-state-hover")
}
})
},
_focusable: function(e) {
this.focusable = this.focusable.add(e), this._on(e, {
focusin: function(e) {
t(e.currentTarget).addClass("ui-state-focus")
},
focusout: function(e) {
t(e.currentTarget).removeClass("ui-state-focus")
}
})
},
_trigger: function(e, s, i) {
var n, o, r = this.options[e];
if (i = i || {}, s = t.Event(s), s.type = (e === this.widgetEventPrefix ? e : this.widgetEventPrefix + e).toLowerCase(), s.target = this.element[0], o = s.originalEvent)
for (n in o) n in s || (s[n] = o[n]);
return this.element.trigger(s, i), !(t.isFunction(r) && r.apply(this.element[0], [s].concat(i)) === !1 || s.isDefaultPrevented())
}
}, t.each({
show: "fadeIn",
hide: "fadeOut"
}, function(e, s) {
t.Widget.prototype["_" + e] = function(i, n, o) {
"string" == typeof n && (n = {
effect: n
});
var r, a = n ? n === !0 || "number" == typeof n ? s : n.effect || s : e;
n = n || {}, "number" == typeof n && (n = {
duration: n
}), r = !t.isEmptyObject(n), n.complete = o, n.delay && i.delay(n.delay), r && t.effects && t.effects.effect[a] ? i[e](n) : a !== e && i[a] ? i[a](n.duration, n.easing, o) : i.queue(function(s) {
t(this)[e](), o && o.call(i[0]), s()
})
}
}), t.widget
}),
function(t) {
"use strict";
t.widget("aerolab.midnight", {
options: {
headerClass: "midnightHeader",
innerClass: "midnightInner",
defaultClass: "default",
classPrefix: "",
sectionSelector: "midnight"
},
_headers: {},
_headerInfo: {
top: 0,
height: 0
},
_$sections: [],
_sections: [],
_scrollTop: 0,
_documentHeight: 0,
_transformMode: !1,
refresh: function() {
this._headerInfo = {
top: 0,
height: this.element.outerHeight()
}, this._$sections = t("[data-" + this.options.sectionSelector + "]:not(:hidden)"), this._sections = [], this._setupHeaders(), this.recalculate()
},
_create: function() {
var e = this;
this._scrollTop = window.pageYOffset || document.documentElement.scrollTop, this._documentHeight = t(document).height(), this._headers = {}, this._transformMode = this._getSupportedTransform(), this.refresh(), setInterval(function() {
e._recalculateSections()
}, 1e3), e.recalculate(), t(window).resize(function() {
e.recalculate()
}), this._updateHeadersLoop()
},
recalculate: function() {
this._recalculateSections(), this._updateHeaderHeight(), this._recalculateHeaders(), this._updateHeaders()
},
_getSupportedTransform: function() {
for (var t = ["transform", "WebkitTransform", "MozTransform", "OTransform", "msTransform"], e = 0; e < t.length; e++)
if (void 0 !== document.createElement("div").style[t[e]]) return t[e];
return !1
},
_getContainerHeight: function() {
var e = this.element.find("> ." + this.options.headerClass),
s = 0,
i = 0,
n = this;
return e.length ? e.each(function() {
var e = t(this),
o = e.find("> ." + n.options.innerClass);
o.length ? (o.css("bottom", "auto").css("overflow", "auto"), i = o.outerHeight(), o.css("bottom", "0")) : (e.css("bottom", "auto"), i = e.outerHeight(), e.css("bottom", "0")), s = i > s ? i : s
}) : s = i = this.element.outerHeight(), s
},
_setupHeaders: function() {
var e = this;
this._headers[this.options.defaultClass] = {};
for (var s = 0; s < this._$sections.length; s++) {
var i = t(this._$sections[s]),
n = i.data(this.options.sectionSelector);
"string" == typeof n && (n = n.trim(), "" !== n && (e._headers[n] = {}))
}({
top: this.element.css("padding-top"),
right: this.element.css("padding-right"),
bottom: this.element.css("padding-bottom"),
left: this.element.css("padding-left")
});
this.element.css({
position: "fixed",
top: 0,
left: 0,
right: 0,
overflow: "hidden"
}), this._updateHeaderHeight();
var o = this.element.find("> ." + this.options.headerClass);
o.length ? o.filter("." + this.options.defaultClass).length || o.filter("." + this.options.headerClass + ":first").clone(!0, !0).attr("class", this.options.headerClass + " " + this.options.defaultClass) : this.element.wrapInner('<div class="' + this.options.headerClass + " " + this.options.defaultClass + '"></div>');
var o = this.element.find("> ." + this.options.headerClass),
r = o.filter("." + this.options.defaultClass).clone(!0, !0);
for (var n in this._headers)
if (this._headers.hasOwnProperty(n) && "undefined" == typeof this._headers[n].element) {
var a = o.filter("." + n);
a.length ? this._headers[n].element = a : this._headers[n].element = r.clone(!0, !0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);
var h = {
position: "absolute",
overflow: "hidden",
top: 0,
left: 0,
right: 0,
bottom: 0
};
this._headers[n].element.css(h), this._transformMode !== !1 && this._headers[n].element.css(this._transformMode, "translateZ(0)"), this._headers[n].element.find("> ." + this.options.innerClass).length || this._headers[n].element.wrapInner('<div class="' + this.options.innerClass + '"></div>'), this._headers[n].inner = this._headers[n].element.find("> ." + this.options.innerClass), this._headers[n].inner.css(h), this._transformMode !== !1 && this._headers[n].inner.css(this._transformMode, "translateZ(0)"), this._headers[n].from = "", this._headers[n].progress = 0
}
o.each(function() {
var s = t(this),
i = !1;
for (var n in e._headers) e._headers.hasOwnProperty(n) && s.hasClass(n) && (i = !0);
s.find("> ." + e.options.innerClass).length || s.wrapInner('<div class="' + e.options.innerClass + '"></div>'), i ? s.show() : s.hide()
})
},
_recalculateHeaders: function() {
this._scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, this._scrollTop = Math.max(this._scrollTop, 0), this._scrollTop = Math.min(this._scrollTop, this._documentHeight);
var t = this._headerInfo.height,
e = this._scrollTop + this._headerInfo.top,
s = e + t;
if ("function" == typeof window.getComputedStyle) {
var i = window.getComputedStyle(this.element[0], null),
n = 0,
o = 0;
if (this._transformMode !== !1 && "string" == typeof i.transform) {
var r = i.transform.match(/(-?[0-9\.]+)/g);
null !== r && r.length >= 6 && !isNaN(parseFloat(r[5])) && (o = parseFloat(r[5]))
}
i.top.indexOf("px") >= 0 && !isNaN(parseFloat(i.top)) && (n = parseFloat(i.top)), e += n + o, s += n + o
}
for (var a in this._headers) this._headers.hasOwnProperty(a) && (this._headers[a].from = "", this._headers[a].progress = 0);
for (var h = 0; h < this._sections.length; h++) s >= this._sections[h].start && e <= this._sections[h].end && (this._headers[this._sections[h].className].visible = !0, e >= this._sections[h].start && s <= this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress += 1) : s > this._sections[h].end && e < this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress = 1 - (s - this._sections[h].end) / t) : s > this._sections[h].start && e < this._sections[h].start && ("top" === this._headers[this._sections[h].className].from ? this._headers[this._sections[h].className].progress += (s - this._sections[h].start) / t : (this._headers[this._sections[h].className].from = "bottom", this._headers[this._sections[h].className].progress = (s - this._sections[h].start) / t)))
},
_updateHeaders: function() {
if ("undefined" != typeof this._headers[this.options.defaultClass]) {
var t = 0,
e = "";
for (var s in this._headers) this._headers.hasOwnProperty(s) && "" !== !this._headers[s].from && (t += this._headers[s].progress, e = s);
t < 1 && ("" === this._headers[this.options.defaultClass].from ? (this._headers[this.options.defaultClass].from = "top" === this._headers[e].from ? "bottom" : "top", this._headers[this.options.defaultClass].progress = 1 - t) : this._headers[this.options.defaultClass].progress += 1 - t);
for (var i in this._headers)
if (this._headers.hasOwnProperty(i) && "" !== !this._headers[i].from) {
var n = 100 * (1 - this._headers[i].progress);
n >= 100 && (n = 110), n <= -100 && (n = -110), "top" === this._headers[i].from ? this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "-" + n + "%", this._headers[i].inner[0].style.top = "+" + n + "%") : this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "+" + n + "%", this._headers[i].inner[0].style.top = "-" + n + "%")
}
}
},
_recalculateSections: function() {
this._documentHeight = t(document).height(), this._sections = [];
for (var e = 0; e < this._$sections.length; e++) {
var s = t(this._$sections[e]);
this._sections.push({
element: s,
className: s.data(this.options.sectionSelector),
start: s.offset().top,
end: s.offset().top + s.outerHeight()
})
}
},
_updateHeaderHeight: function() {
this._headerInfo.height = this._getContainerHeight(), this.element.css("height", this._headerInfo.height + "px")
},
_updateHeadersLoop: function() {
var t = this;
this._requestAnimationFrame(function() {
t._updateHeadersLoop()
}), this._recalculateHeaders(), this._updateHeaders()
},
_requestAnimationFrame: function(t) {
var e = e || function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(t) {
window.setTimeout(t, 1e3 / 60)
}
}();
e(t)
}
})
}(jQuery);
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
}
/* base style */
a {
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
i {
color: #000;
padding-bottom: 30px;
}
p {
line-height: 28px;
font-weight: 300px;
color: #666;
}
.big-text {
font-size: 70px;
font-weight: 900;
}
.medium-text {
font-size: 40px;
}
.normal-text {
font-size: 20px;
}
.small-text {
font-size: 14px
}
.intro-text {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.button {
background: #316bff;
padding: 18px 28px;
color: #fff;
display: inline-block;
border-radius: 4px;
}
.subtitle {
color: #000;
text-decoration: underline;
}
/* header */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default {
background: #316bff;
color: #000;
}
.white {
background: red;
color: red;
}
.white ul li a{
color: white;
}
.menu {
width: 100%;
color: #fff;
transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.menu li {
display: inline-block;
}
.menu li a {
;
display: block;
padding: 15px;
color: #000;
font-weight: 700;
}
/* hero */
.hero {
background: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)), url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex;
width: 100%;
align-items: center;
}
.hero__content {
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1 {
margin-top: 50px;
}
.mt-2 {
margin-top: 100px;
}
.mt-3 {
margin-top: 150px;
}
.tw {
color: #fff;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default">
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le
guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function() {
// Change this to the correct selector.
$('nav.header').midnight();
});
</script>

Infinitely rolling text with CSS

On my HTML page, I need to have a line with text that rolls "infinitely" on the page, e.g.
"Hello World ... Hello World ... Hello World ... Hello World ..."
Sort of like a ticker tape, but with the same text's beginning rolling into its end w/o a gap.
I've tried using animation: marquee CSS style, I can get the text roll, then jump back, then roll again, but that's not what I need.
Is this possible with CSS? JS would be OK, if there is a working solution.

Try here "text rolling" working with text & images and mouse effects(js+css)
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Are you open to using a lib that does this?
This one here: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/ does a good job.
$(document).ready(function() {
new Marquee('example', {
// once or continuous
continuous: true,
// 'rtl' or 'ltr'
direction: 'rtl',
// pause between loops
delayAfter: 1000,
// when to start
delayBefore: 0,
// scroll speed
speed: 0.5,
// loops
loops: -1
});
});
////////////////////////////// LIBRARY BELOW ///////
// See: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/
/*
Vanilla Javascript Marquee
Version: 0.1.0
Author: Robert Bossaert <https://github.com/robertbossaert>
Example call:
new Marquee('element');
new Marquee('element', {
direction: 'rtl',
});
*/
var Marquee = function(element, defaults) {
"use strict";
var elem = document.getElementById(element),
options = (defaults === undefined) ? {} : defaults,
continuous = options.continuous || true, // once or continuous
delayAfter = options.delayAfter || 1000, // pause between loops
delayBefore = options.delayBefore || 0, // when to start
direction = options.direction || 'ltr', // ltr or rtl
loops = options.loops || -1,
speed = options.speed || 0.5,
timer = null,
milestone = 0,
marqueeElem = null,
elemWidth = null,
self = this,
ltrCond = 0,
loopCnt = 0,
start = 0,
process = null,
constructor = function(elem) {
// Build html
var elemHTML = elem.innerHTML,
elemNode = elem.childNodes[1] || elem;
elemWidth = elemNode.offsetWidth;
marqueeElem = '<div>' + elemHTML + '</div>';
elem.innerHTML = marqueeElem;
marqueeElem = elem.getElementsByTagName('div')[0];
elem.style.overflow = 'hidden';
marqueeElem.style.whiteSpace = 'nowrap';
marqueeElem.style.position = 'relative';
if (continuous === true) {
marqueeElem.innerHTML += elemHTML;
marqueeElem.style.width = '200%';
if (direction === 'ltr') {
start = -elemWidth;
}
} else {
ltrCond = elem.offsetWidth;
if (direction === 'rtl') {
milestone = ltrCond;
}
}
if (direction === 'ltr') {
milestone = -elemWidth;
} else if (direction === 'rtl') {
speed = -speed;
}
self.start();
return marqueeElem;
}
this.start = function() {
process = window.setInterval(function() {
self.play();
});
};
this.play = function() {
// beginning
marqueeElem.style.left = start + 'px';
start = start + speed;
if (start > ltrCond || start < -elemWidth) {
start = milestone;
loopCnt++;
if (loops !== -1 && loopCnt >= loops) {
marqueeElem.style.left = 0;
}
}
}
this.end = function() {
window.clearInterval(process);
}
// Init plugin
marqueeElem = constructor(elem);
}
body {
background: #edf3f9;
color: #3f4f5f;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
}
header {
border-bottom: 2px solid #3f4f5f;
padding: 6.25em 0 3.95em;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 0 10px;
}
.example {
padding: 3em 0;
}
h2 {
text-align: center;
}
pre {
background: #f5f2f0;
color: #000;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
line-height: 26px;
padding: 1em;
text-shadow: 0 1px white;
white-space: pre-wrap;
}
pre span.string {
color: #690;
}
pre span.number {
color: #905;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
The quick brown fox ran over to the bar to drink some water. He walked up to the bar tender and said: blah blah blah.
</div>

Here is a demo based upon the lib that Dreamer posted.
I didn't like how it set inline styles on the element or how it used cookies to store past settings so I removed that in the crawler.js code.
This is a pretty old library (ie5 is mentioned (!)) but it seems to do the trick.
$(function() {
marqueeInit({
uniqueid: 'mycrawler',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
});
//////////////// CRAWLER.JS FOLLOWS ///////////
/* Text and/or Image Crawler Script v1.53 (c)2009-2012 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
/* Update 11/2011 - Detect and randomize td elements within a single table with a single tr */
// updated 7/2012 to 1.51 for optional integration with 3rd party initializing scripts -
// ref: http://www.dynamicdrive.com/forums/showthread.php?p=278161#post278161
// updated 8/2012 to 1.52 for greater compatibility with IE in Quirks Mode
/* Update 10/2012 to v1.53 - Adds optional persist property to have the crawler remember its
position and direction page to page and on page reload. To enable it in the marqueeInit set
persist: true,
*/
///////////////// No Need to Edit - Configuration is Done in the On Page marqueeInit call(s) /////////////////
function marqueeInit(config) {
if (!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function() {
if (!document.createElement) return;
if (typeof opera === 'undefined') {
window.opera = false;
}
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0,
tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {
'position': 'relative',
'overflow': 'hidden'
},
defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
},
dash, ie = false,
oldie = 0,
ie5 = false,
iever = 0;
/*#cc_on #*/
/*#if(#_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
#end #*/
if (!ie5) {
dash = /-(.)/g;
function toHump(a, b) {
return b.toUpperCase();
};
String.prototype.encamel = function() {
return this.replace(dash, toHump);
};
}
if (ie && iever < 8) {
marqueeInit.table = [];
window.attachEvent('onload', function() {
marqueeInit.OK = true;
var i = -1,
limit = marqueeInit.table.length;
while (++i < limit)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el) {
while ((el = el.parentNode))
if (el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id) {
if (ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))) {
marqueeInit.table.push(id);
return;
}
if (!document.getElementById(id))
setTimeout(function() {
marqueeInit.run(id);
}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag) {
var r = [],
i = 0,
e;
while ((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while ((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if ((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if ((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while ((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag) {
var els = oldie ? tag.all : tag.getElementsByTagName('*'),
i = els.length,
childels = [];
while (--i > -1) {
if (els[i].parentNode === tag) {
childels.push(els[i]);
}
}
childels.sort(function() {
return 0.5 - Math.random();
});
i = childels.length;
while (--i > -1) {
tag.appendChild(childels[i]);
}
}
function Marq(c, tag) {
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if (this.mq.random) {
if (tag.getElementsByTagName && tag.getElementsByTagName('tr').length === 1 && tag.childNodes.length === 1) {
randthem(tag.getElementsByTagName('tr')[0]);
} else {
randthem(tag);
}
}
for (p in defaultconfig)
if ((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width)) ? '100%' : this.mq.style.width;
if (!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width ? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if (ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [
[req1, this.c.style],
[this.mq.style, this.c.style]
];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if ((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if (this.mq.mouse === 'pause') {
this.c.onmouseover = function() {
cObj.mq.stopped = true;
};
this.c.onmouseout = function() {
cObj.mq.stopped = false;
};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if (ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if (!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for (i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if (ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if (ims.length) {
for (ic = 0, i = 0; i < ims.length; ++i) {
ims[i].style.display = 'inline';
if (!ims[i].alt && !this.mq.noAddedAlt) {
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if (!ims[i].title) {
ims[i].title = '';
}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if (typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function() {
if (++ic === ims.length)
cObj.setup(c);
};
}
if (ic === ims.length)
this.setup(c);
}
} else this.setup(c)
}
Marq.prototype.setup = function(c) {
if (this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this,
exit = 10000;
if (this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if (typeof this.mq.initcontent === 'function') {
this.mq.initcontent.apply(this.mq, [this.m]);
}
if (this.mq.mouse === 'cursor driven') {
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e) {
cObj.mq.stopped = false;
cObj.directspeed(e)
};
if (this.mq.moveatleast) {
this.mq.inc = this.mq.moveatleast;
if (this.mq.savedirection) {
if (this.mq.savedirection === 'reverse') {
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right' ? 'left' : 'right';
};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;
};
}
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;
};
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.slowdeath();
};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast ? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while (this.c.offsetWidth > this.w - s && --exit) {
w = isNaN(this.cw[0]) ? this.w - s : --this.cw[0];
if (w < 1 || this.w < Math.max(1, s)) {
break;
}
this.c.style.width = isNaN(this.cw[0]) ? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function() {
var cObj = this;
if (this.mq.inc) {
this.mq.inc -= 1;
this.timer = setTimeout(function() {
cObj.slowdeath();
}, 100);
}
}
Marq.prototype.runit = function() {
var cObj = this,
d = this.mq.direction === 'right' ? 1 : -1;
if (this.mq.stopped || this.mq.stopMarquee) {
setTimeout(function() {
cObj.runit();
}, 300);
return;
}
if (this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if (d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if (d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function() {
cObj.runit();
}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e) {
e = e || window.event;
if (this.timer) clearTimeout(this.timer);
var c = this.c,
w = c.offsetWidth,
l = c.offsetLeft,
mp = (typeof e.pageX === 'number' ?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2,
rb = (w + this.r) / 2;
while ((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb ? 'left' : 'right';
this.mq.inc = Math.round((mp > rb ? (mp - rb) : mp < lb ? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e) {
if (e && e.relatedTarget) {
var c = e.relatedTarget;
if (c === this.c) return true;
while ((c = c.parentNode))
if (c === this.c) return true;
}
return false;
}
function resize() {
for (var s, w, m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast ? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1 ? parseInt(m.mq.style.width) : 'a';
while (m.c.offsetWidth > m.w - s) {
w = isNaN(m.cw[0]) ? m.w - s : --m.cw[0];
if (w < 1) {
break;
}
m.c.style.width = isNaN(m.cw[0]) ? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
function unload() {
for (var m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].persist && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
m.cookie.set(m.mq.uniqueid, m.m[0].style.left + ':' + m.m[1].style.left + ':' + m.mq.direction);
}
}
}
if (window.addEventListener) {
window.addEventListener('resize', resize, false);
window.addEventListener('unload', unload, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', resize);
window.attachEvent('onunload', unload);
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

Mouseleave delay

I'd like to delay the zoomed image disappearing by a X seconds so I can fade out the image rather than it simply disappearing.
Can I simply add .delay(1000) somewhere to the mouseleave / hide lines of code?
I've tried that but unfortunately doesn't seem to work. I've also tried to wrap a setTimeout( ... , 1000); around various parts of the code, but couldn't make that work either.
Any help much appreciated!
Here is the Jsfiddle https://jsfiddle.net/mr_antlers/nh5jw5tb/2/
This is the original 'EasyZoom' .js code.
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});

You can pass in beforeShow and beforeHide argument into easyZoom when you instantiate them.
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function(a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function() {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function(a) {
a.preventDefault()
})
}, b.prototype.show = function(a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function() {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function(a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function(a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function() {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function(a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function() {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function() {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function(b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function(a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function() {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function(b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function() {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function(c) {
return this.each(function() {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function() {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {
vertical-align: bottom;
}
.easyzoom.is-loading img {
cursor: progress;
}
.easyzoom.is-ready img {
cursor: default;
}
.easyzoom.is-error img {
cursor: not-allowed;
}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 0;
transition: 0.2s;
}
.easyzoom-flyout:hover {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 1;
transition: 0.8s;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>
You can refer the flyout zoomed image using this.$flyout in the functions.
Return false if you want to stop the default hide or show function. Just remember to add the default behavior into your function if you are doing that.
In the example I did above, I do a fadeOut on the zoomed image and stop the flyout from detaching (default behavior is detach() the zoomed image element). Then, as the flyout element was faded out, I have to use $.show() or the element will be stuck at display: none and nothing will be shown on mouseover.
Hope this helps.

'mouseleave' trigger _onLeave() which fire hide() which cause the zoomed div with image is removed from the DOM so any CSS transition or $().fadeOut() does not work. I removed hide() firing when mouseleave and change opacity in CSS and it seems to work now and anything else seems to be broken. Change opacity time as you wish.
fiddle
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {vertical-align: bottom;}
.easyzoom.is-loading img {cursor: progress;}
.easyzoom.is-ready img {cursor: default;}
.easyzoom.is-error img {cursor: not-allowed;}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:0;
transition: opacity 1s ease-in-out;
}
.easyzoom-flyout:hover {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:1;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>

Image slider transition time

I just created an image slider based off of a tutorial I found. I just stuck some quick pics I found online to test it out, but the reason I am asking a question is because the amount of time it takes to change the image varies so much. It will take forever and then it will start changing the images every second or two. How can I make my slider have a consistent slide transition.
It will probably be best to post my site so you can see what it is doing.
realtorcatch.com
I am using a plugin javascript, so the code is a bunched up. Is there a way to add in my own code so that the same basic features work, but it is of better quality?
The Jquery:
(function (e) {
var t = function (t, n) {
var r = e.extend({}, e.fn.nivoSlider.defaults, n);
var i = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
var s = e(t);
s.data("nivo:vars", i).addClass("nivoSlider");
var o = s.children();
o.each(function () {
var t = e(this);
var n = "";
if (!t.is("img")) {
if (t.is("a")) {
t.addClass("nivo-imageLink");
n = t
}
t = t.find("img:first")
}
var r = r === 0 ? t.attr("width") : t.width(),
s = s === 0 ? t.attr("height") : t.height();
if (n !== "") {
n.css("display", "none")
}
t.css("display", "none");
i.totalSlides++
});
if (r.randomStart) {
r.startSlide = Math.floor(Math.random() * i.totalSlides)
}
if (r.startSlide > 0) {
if (r.startSlide >= i.totalSlides) {
r.startSlide = i.totalSlides - 1
}
i.currentSlide = r.startSlide
}
if (e(o[i.currentSlide]).is("img")) {
i.currentImage = e(o[i.currentSlide])
} else {
i.currentImage = e(o[i.currentSlide]).find("img:first")
}
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
var u = e("<img/>").addClass("nivo-main-image");
u.attr("src", i.currentImage.attr("src")).show();
s.append(u);
e(window).resize(function () {
s.children("img").width(s.width());
u.attr("src", i.currentImage.attr("src"));
u.stop().height("auto");
e(".nivo-slice").remove();
e(".nivo-box").remove()
});
s.append(e('<div class="nivo-caption"></div>'));
var a = function (t) {
var n = e(".nivo-caption", s);
if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
var r = i.currentImage.attr("title");
if (r.substr(0, 1) == "#") r = e(r).html();
if (n.css("display") == "block") {
setTimeout(function () {
n.html(r)
}, t.animSpeed)
} else {
n.html(r);
n.stop().fadeIn(t.animSpeed)
}
} else {
n.stop().fadeOut(t.animSpeed)
}
};
a(r);
var f = 0;
if (!r.manualAdvance && o.length > 1) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
if (r.directionNav) {
s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
e(s).on("click", "a.nivo-prevNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
i.currentSlide -= 2;
d(s, o, r, "prev")
});
e(s).on("click", "a.nivo-nextNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
d(s, o, r, "next")
})
}
if (r.controlNav) {
i.controlNavEl = e('<div class="nivo-controlNav"></div>');
s.after(i.controlNavEl);
for (var l = 0; l < o.length; l++) {
if (r.controlNavThumbs) {
i.controlNavEl.addClass("nivo-thumbs-enabled");
var c = o.eq(l);
if (!c.is("img")) {
c = c.find("img:first")
}
if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
} else {
i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
}
}
e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
e("a", i.controlNavEl).bind("click", function () {
if (i.running) return false;
if (e(this).hasClass("active")) return false;
clearInterval(f);
f = "";
u.attr("src", i.currentImage.attr("src"));
i.currentSlide = e(this).attr("rel") - 1;
d(s, o, r, "control")
})
}
if (r.pauseOnHover) {
s.hover(function () {
i.paused = true;
clearInterval(f);
f = ""
}, function () {
i.paused = false;
if (f === "" && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
})
}
s.bind("nivo:animFinished", function () {
u.attr("src", i.currentImage.attr("src"));
i.running = false;
e(o).each(function () {
if (e(this).is("a")) {
e(this).css("display", "none")
}
});
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
if (f === "" && !i.paused && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
r.afterChange.call(this)
});
var h = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
for (var s = 0; s < n.slices; s++) {
var o = Math.round(t.width() / n.slices);
if (s === n.slices - 1) {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: t.width() - o * s + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
} else {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: o + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
}
}
e(".nivo-slice", t).height(i);
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var p = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = Math.round(t.width() / n.boxCols),
s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
for (var o = 0; o < n.boxRows; o++) {
for (var a = 0; a < n.boxCols; a++) {
if (a === n.boxCols - 1) {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: t.width() - i * a + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
} else {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: i + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
}
}
}
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var d = function (t, n, r, i) {
var s = t.data("nivo:vars");
if (s && s.currentSlide === s.totalSlides - 1) {
r.lastSlide.call(this)
}
if ((!s || s.stop) && !i) {
return false
}
r.beforeChange.call(this);
if (!i) {
u.attr("src", s.currentImage.attr("src"))
} else {
if (i === "prev") {
u.attr("src", s.currentImage.attr("src"))
}
if (i === "next") {
u.attr("src", s.currentImage.attr("src"))
}
}
s.currentSlide++;
if (s.currentSlide === s.totalSlides) {
s.currentSlide = 0;
r.slideshowEnd.call(this)
}
if (s.currentSlide < 0) {
s.currentSlide = s.totalSlides - 1
}
if (e(n[s.currentSlide]).is("img")) {
s.currentImage = e(n[s.currentSlide])
} else {
s.currentImage = e(n[s.currentSlide]).find("img:first")
}
if (r.controlNav) {
e("a", s.controlNavEl).removeClass("active");
e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
}
a(r);
e(".nivo-slice", t).remove();
e(".nivo-box", t).remove();
var o = r.effect,
f = "";
if (r.effect === "random") {
f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
o = f[Math.floor(Math.random() * (f.length + 1))];
if (o === undefined) {
o = "fade"
}
}
if (r.effect.indexOf(",") !== -1) {
f = r.effect.split(",");
o = f[Math.floor(Math.random() * f.length)];
if (o === undefined) {
o = "fade"
}
}
if (s.currentImage.attr("data-transition")) {
o = s.currentImage.attr("data-transition")
}
s.running = true;
var l = 0,
c = 0,
d = "",
m = "",
g = "",
y = "";
if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
top: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
bottom: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
h(t, r, s);
l = 0;
c = 0;
var b = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
if (c === 0) {
n.css("top", "0px");
c++
} else {
n.css("bottom", "0px");
c = 0
}
if (b === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
b++
})
} else if (o === "fold") {
h(t, r, s);
l = 0;
c = 0;
e(".nivo-slice", t).each(function () {
var n = e(this);
var i = n.width();
n.css({
top: "0px",
width: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "fade") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: t.width() + "px"
});
m.animate({
opacity: "1.0"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInRight") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInLeft") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
m.css({
left: "0px",
right: ""
});
t.trigger("nivo:animFinished")
})
} else if (o === "boxRandom") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
y = v(e(".nivo-box", t));
y.each(function () {
var n = e(this);
if (c === g - 1) {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed)
}, 100 + l)
}
l += 20;
c++
})
} else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
var w = 0;
var E = 0;
var S = [];
S[w] = [];
y = e(".nivo-box", t);
if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
y = e(".nivo-box", t)._reverse()
}
y.each(function () {
S[w][E] = e(this);
E++;
if (E === r.boxCols) {
w++;
E = 0;
S[w] = []
}
});
for (var x = 0; x < r.boxCols * 2; x++) {
var T = x;
for (var N = 0; N < r.boxRows; N++) {
if (T >= 0 && T < r.boxCols) {
(function (n, i, s, u, a) {
var f = e(S[n][i]);
var l = f.width();
var c = f.height();
if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
f.width(0).height(0)
}
if (u === a - 1) {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + s)
} else {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3)
}, 100 + s)
}
})(N, T, l, c, g);
c++
}
T--
}
l += 100
}
}
};
var v = function (e) {
for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
return e
};
var m = function (e) {
if (this.console && typeof console.log !== "undefined") {
console.log(e)
}
};
this.stop = function () {
if (!e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = true;
m("Stop Slider")
}
};
this.start = function () {
if (e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = false;
m("Start Slider")
}
};
r.afterLoad.call(this);
return this
};
e.fn.nivoSlider = function (n) {
return this.each(function (r, i) {
var s = e(this);
if (s.data("nivoslider")) {
return s.data("nivoslider")
}
var o = new t(this, n);
s.data("nivoslider", o)
})
};
e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: "Prev",
nextText: "Next",
randomStart: false,
beforeChange: function () {},
afterChange: function () {},
slideshowEnd: function () {},
lastSlide: function () {},
afterLoad: function () {}
};
e.fn._reverse = [].reverse
})(jQuery)

Things like this :
r.startSlide = Math.floor(Math.random() * i.totalSlides)
are the issue here, it has been programmed deliberately as it is.
There are much simpler sliders, even with css only.
I have one that is fully responsive, let me know if you want that.

#Becky
Ok here goes, i will explain the most important things.
Use the img tag for this in the HTML, this way it's very easy to defer load or lazy load the pics later on.
In the CSS, the first thing is the keyframes, if you would like the images to slide differently, let me know, i can change this.
This example will work on all devices and is fully responsive, some very old phones will just slide th epics from left to right, i.e. the phones which do not support transforms, but it will still work, you would need some extra prefixes for this, i can add them if you like.
Line 23 i wrap the whole thing to be displayed as flexbox.
Line 41 we just declare the width of the figure element(you can use a div here too, it does not really matter), the width is 800%, because we have 8 pics in this slider.if it were 5 pics, we would say width is 500% etc.
We take out margin, padding etc, the img float left is just to avoid some inconsistencies in IE.
What this slider will do is, it pushes the pics to the left when we change the margin, see in the keyframes, we push it left 100% for the next pic, 200% for the one after that etc.
We declare the img width in the figure element to be 12.5%(100% / 8pics=12.5%), if we had 5 pics, the img width would be 20% etc.
And finally, the slider div is defined, you can change the border here, or the box shadow, and the background color, so when the pics do not fill out the frame, you can have the background color of choice, i have set it to transparent here.
Overflow hidden is mandatory for this slider, the width is set to 80% OR a maximum of 500pix, whichever occurs first.
<div class="superslide"><div id="slider">
<figure>
<img src="http://generalunion.org/Joomla/images/holidays.jpg"
width=350 height=350>
http://codepen.io/damianocel/pen/OyzaZB
That is it, no JS, very light weight, responsive and works on all devices.
You can use it as full backkground slider etc, just make sure the pics are all the same size.
to change the speed of the animations, just go to the lines 49 and 50 to change the time parameter(28s here).

One-page scroll problems

I am using a free wordpress theme (I know, that is part of the problem :). It is a one-page scrolling theme with a sticky header. The problem is that the links do not hit the top of the sections - they scroll past. I did use CSS to increase the size of the header. If this throws it off that much how do I correct it in the coding?
site: http://whatsahead.com/closuremediatest/ (in the works)
The oddest part is it is not even consistent on where it lands on that section. What could be causing this?
CSS I edited:
`.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
overflow-x: visible;
margin-left: 155px !important;
padding-right: 15px;
padding-left: 15px;
background: #000;
margin-bottom: 30px !important;
margin-left: 195px !important;
margin-top: 50px;
max-height: 65px;
}
#navigation .navbar-nav {
float: left;
}
#navigation .navbar-nav > li > a {
font-family: "aleolight";
font-size: 20px;
font-weight: normal;
padding-bottom: 30px;
padding-top: 20px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: none !important;
color: #b4d333 !important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: none;
color: #b4d333 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent !important;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:before {
background-color: transparent;
background-image: url("http://whatsahead.com/closuremediatest/wp-content/uploads/2015/01/arrow-down.png");
background-position: 40% 40%;
background-repeat: no-repeat;
content: "";
display: block;
height: 11px;
left: 0px;
position: absolute;
margin-top: 8px;
width: 18px;
}
#masthead.sticky #navigation .navbar-nav > li > a {
padding: 17px 25px;
}`
Javacript scrollto:
;(function (define) {
'use strict';
define(['jquery'], function ($) {
var $scrollTo = $.scrollTo = function( target, duration, settings ) {
return $(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: 0,
limit:true
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ) {
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function() {
return this.map(function() {
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(),
['iframe','#document','html','body'] ) != -1;
if (!isWin)
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ) {
if (typeof duration == 'object') {
settings = duration;
duration = 0;
}
if (typeof settings == 'function')
settings = { onAfter:settings };
if (target == 'max')
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if (settings.queue)
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function() {
// Null target yields nothing, just like jQuery does
if (target == null) return;
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch (typeof targ) {
// A number will pass the regex
case 'number':
case 'string':
if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
targ = both( targ );
// We are done
break;
}
// Relative/Absolute selector, no break!
targ = win ? $(targ) : $(targ, this);
if (!targ.length) return;
case 'object':
// DOMElement / jQuery
if (targ.is || targ.style)
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) ||
settings.offset;
$.each( settings.axis.split(''), function( i, axis ) {
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if (toff) {// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if (settings.margin) {
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += offset[pos] || 0;
if(settings.over[pos])
// Scroll to a fraction of its width/height
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
} else {
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if (settings.limit && /^\d+$/.test(attr[key]))
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if (!i && settings.queue) {
// Don't waste time animating, if there's no need.
if (old != attr[key])
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ) {
$elem.animate( attr, duration, settings.easing, callback && function() {
callback.call(this, targ, settings);
});
}
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ) {
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if (!$(elem).is('html,body'))
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] ) - Math.min( html[size] , body[size] );
};
function both( val ) {
return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
}
// AMD requirement
return $scrollTo;
})
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
if (typeof module !== 'undefined' && module.exports) {
// Node
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}));
Javascript smoothscroll:
function ssc_init() {
if (!document.body) return;
var e = document.body;
var t = document.documentElement;
var n = window.innerHeight;
var r = e.scrollHeight;
ssc_root = document.compatMode.indexOf("CSS") >= 0 ? t : e;
ssc_activeElement = e;
ssc_initdone = true;
if (top != self) {
ssc_frame = true
} else if (r > n && (e.offsetHeight <= n || t.offsetHeight <= n)) {
ssc_root.style.height = "auto";
if (ssc_root.offsetHeight <= n) {
var i = document.createElement("div");
i.style.clear = "both";
e.appendChild(i)
}
}
if (!ssc_fixedback) {
e.style.backgroundAttachment = "scroll";
t.style.backgroundAttachment = "scroll"
}
if (ssc_keyboardsupport) {
ssc_addEvent("keydown", ssc_keydown)
}
}
function ssc_scrollArray(e, t, n, r) {
r || (r = 1e3);
ssc_directionCheck(t, n);
ssc_que.push({
x: t,
y: n,
lastX: t < 0 ? .99 : -.99,
lastY: n < 0 ? .99 : -.99,
start: +(new Date)
});
if (ssc_pending) {
return
}
var i = function() {
var s = +(new Date);
var o = 0;
var u = 0;
for (var a = 0; a < ssc_que.length; a++) {
var f = ssc_que[a];
var l = s - f.start;
var c = l >= ssc_animtime;
var h = c ? 1 : l / ssc_animtime;
if (ssc_pulseAlgorithm) {
h = ssc_pulse(h)
}
var p = f.x * h - f.lastX >> 0;
var d = f.y * h - f.lastY >> 0;
o += p;
u += d;
f.lastX += p;
f.lastY += d;
if (c) {
ssc_que.splice(a, 1);
a--
}
}
if (t) {
var v = e.scrollLeft;
e.scrollLeft += o;
if (o && e.scrollLeft === v) {
t = 0
}
}
if (n) {
var m = e.scrollTop;
e.scrollTop += u;
if (u && e.scrollTop === m) {
n = 0
}
}
if (!t && !n) {
ssc_que = []
}
if (ssc_que.length) {
setTimeout(i, r / ssc_framerate + 1)
} else {
ssc_pending = false
}
};
setTimeout(i, 0);
ssc_pending = true
}
function ssc_wheel(e) {
if (!ssc_initdone) {
ssc_init()
}
var t = e.target;
var n = ssc_overflowingAncestor(t);
if (!n || e.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(t, "embed") && /\.pdf/i.test(t.src)) {
return true
}
var r = e.wheelDeltaX || 0;
var i = e.wheelDeltaY || 0;
if (!r && !i) {
i = e.wheelDelta || 0
}
if (Math.abs(r) > 1.2) {
r *= ssc_stepsize / 120
}
if (Math.abs(i) > 1.2) {
i *= ssc_stepsize / 120
}
ssc_scrollArray(n, -r, -i);
e.preventDefault()
}
function ssc_keydown(e) {
var t = e.target;
var n = e.ctrlKey || e.altKey || e.metaKey;
if (/input|textarea|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) {
return true
}
if (ssc_isNodeName(t, "button") && e.keyCode === ssc_key.spacebar) {
return true
}
var r, i = 0,
s = 0;
var o = ssc_overflowingAncestor(ssc_activeElement);
var u = o.clientHeight;
if (o == document.body) {
u = window.innerHeight
}
switch (e.keyCode) {
case ssc_key.up:
s = -ssc_arrowscroll;
break;
case ssc_key.down:
s = ssc_arrowscroll;
break;
case ssc_key.spacebar:
r = e.shiftKey ? 1 : -1;
s = -r * u * .9;
break;
case ssc_key.pageup:
s = -u * .9;
break;
case ssc_key.pagedown:
s = u * .9;
break;
case ssc_key.home:
s = -o.scrollTop;
break;
case ssc_key.end:
var a = o.scrollHeight - o.scrollTop - u;
s = a > 0 ? a + 10 : 0;
break;
case ssc_key.left:
i = -ssc_arrowscroll;
break;
case ssc_key.right:
i = ssc_arrowscroll;
break;
default:
return true
}
ssc_scrollArray(o, i, s);
e.preventDefault()
}
function ssc_mousedown(e) {
ssc_activeElement = e.target
}
function ssc_setCache(e, t) {
for (var n = e.length; n--;) ssc_cache[ssc_uniqueID(e[n])] = t;
return t
}
function ssc_overflowingAncestor(e) {
var t = [];
var n = ssc_root.scrollHeight;
do {
var r = ssc_cache[ssc_uniqueID(e)];
if (r) {
return ssc_setCache(t, r)
}
t.push(e);
if (n === e.scrollHeight) {
if (!ssc_frame || ssc_root.clientHeight + 10 < n) {
return ssc_setCache(t, document.body)
}
} else if (e.clientHeight + 10 < e.scrollHeight) {
overflow = getComputedStyle(e, "").getPropertyValue("overflow");
if (overflow === "scroll" || overflow === "auto") {
return ssc_setCache(t, e)
}
}
} while (e = e.parentNode)
}
function ssc_addEvent(e, t, n) {
window.addEventListener(e, t, n || false)
}
function ssc_removeEvent(e, t, n) {
window.removeEventListener(e, t, n || false)
}
function ssc_isNodeName(e, t) {
return e.nodeName.toLowerCase() === t.toLowerCase()
}
function ssc_directionCheck(e, t) {
e = e > 0 ? 1 : -1;
t = t > 0 ? 1 : -1;
if (ssc_direction.x !== e || ssc_direction.y !== t) {
ssc_direction.x = e;
ssc_direction.y = t;
ssc_que = []
}
}
function ssc_pulse_(e) {
var t, n, r;
e = e * ssc_pulseScale;
if (e < 1) {
t = e - (1 - Math.exp(-e))
} else {
n = Math.exp(-1);
e -= 1;
r = 1 - Math.exp(-e);
t = n + r * (1 - n)
}
return t * ssc_pulseNormalize
}
function ssc_pulse(e) {
if (e >= 1) return 1;
if (e <= 0) return 0;
if (ssc_pulseNormalize == 1) {
ssc_pulseNormalize /= ssc_pulse_(1)
}
return ssc_pulse_(e)
}
var ssc_framerate = 150;
var ssc_animtime = 500;
var ssc_stepsize = 150;
var ssc_pulseAlgorithm = true;
var ssc_pulseScale = 6;
var ssc_pulseNormalize = 1;
var ssc_keyboardsupport = true;
var ssc_arrowscroll = 50;
var ssc_frame = false;
var ssc_direction = {
x: 0,
y: 0
};
var ssc_initdone = false;
var ssc_fixedback = true;
var ssc_root = document.documentElement;
var ssc_activeElement;
var ssc_key = {
left: 37,
up: 38,
right: 39,
down: 40,
spacebar: 32,
pageup: 33,
pagedown: 34,
end: 35,
home: 36
};
var ssc_que = [];
var ssc_pending = false;
var ssc_cache = {};
setInterval(function() {
ssc_cache = {}
}, 10 * 1e3);
var ssc_uniqueID = function() {
var e = 0;
return function(t) {
return t.ssc_uniqueID || (t.ssc_uniqueID = e++)
}
}();
var ischrome = /chrome/.test(navigator.userAgent.toLowerCase());
if (ischrome) {
ssc_addEvent("mousedown", ssc_mousedown);
ssc_addEvent("mousewheel", ssc_wheel);
ssc_addEvent("load", ssc_init)
}

It's not a Javascript problem but a CSS issue.
First of all you logo img is too big. it's pushing the navbar down and mismatching the calculation. Let's fix it:
.navbar-brand img {
max-height: 110px;
}
Then we must add a margin to the top of the page content.
.title-area, .page-content {
margin-top: 40px;
}
Add it in your custom.csss and it will solve your problem

I solved the problem by editing javascript file. It was removing the "sticky" class when scrolled to the far top which voided some of my css edits I wanted to stay with. Therefore, by editing the javascript so that the document was always "sticky" I was able to make the header larger as I desired.

We Keep Coding

JavaScript is the programming language of the Web.