handle toggle only on load and scroll.
This commit is contained in:
Родитель
f77b30b50a
Коммит
a129448ff9
|
@ -899,24 +899,24 @@ body {
|
|||
.platform-toggle .segmented-controller {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
border-color: #fff;
|
||||
border-color: #00d1fe;
|
||||
background-color: transparent;
|
||||
}
|
||||
.platform-toggle .segmented-controller li {
|
||||
cursor: pointer;
|
||||
border-color: #fff;
|
||||
border-color: #00d1fe;
|
||||
}
|
||||
.platform-toggle .segmented-controller li a {
|
||||
color: #fff;
|
||||
color: #00d1fe;
|
||||
}
|
||||
.platform-toggle .segmented-controller li:active {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(0, 209, 254, 0.3);
|
||||
}
|
||||
.platform-toggle .segmented-controller li.selected {
|
||||
background-color: #fff;
|
||||
background-color: #00d1fe;
|
||||
}
|
||||
.platform-toggle .segmented-controller li.selected a {
|
||||
color: #254456;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.component {
|
||||
|
|
|
@ -15,14 +15,13 @@ $(function() {
|
|||
var topCache;
|
||||
var eventListeners;
|
||||
|
||||
var initialize = function () {
|
||||
var initialize = function () {
|
||||
currentActive = 0;
|
||||
topCache = [];
|
||||
win = $(window);
|
||||
doc = $(document);
|
||||
bod = $(document.body)
|
||||
device = device || $('.device');
|
||||
platformToggle = $('.platform-toggle');
|
||||
navComponentLinks = $('.docs-nav');
|
||||
componentsList = $('.components-list');
|
||||
componentLinks = $('.component-example a');
|
||||
|
@ -38,10 +37,6 @@ $(function() {
|
|||
device.initialTop = device.initialTop || device.offset().top;
|
||||
device.dockingOffset = ($(window).height() - device.height())/2;
|
||||
|
||||
// Toggle placment
|
||||
toggleTop = platformToggle.offset().top;
|
||||
toggleHeight = platformToggle.outerHeight();
|
||||
|
||||
checkDesktopContent();
|
||||
calculateScroll();
|
||||
|
||||
|
@ -87,6 +82,7 @@ $(function() {
|
|||
});
|
||||
|
||||
win.on('scroll', calculateScroll);
|
||||
win.on('scroll', calculateToggle);
|
||||
}
|
||||
|
||||
var checkDesktopContent = function () {
|
||||
|
@ -115,14 +111,6 @@ $(function() {
|
|||
device[0].setAttribute('style','')
|
||||
}
|
||||
|
||||
if(currentTop >= toggleTop) {
|
||||
platformToggle.addClass('fixed');
|
||||
$('.docs-components').css('padding-top', toggleHeight);
|
||||
} else if (currentTop <= $('.docs-header').outerHeight()) {
|
||||
platformToggle.removeClass('fixed');
|
||||
$('.docs-components').css('padding-top', 0);
|
||||
}
|
||||
|
||||
// Injection of components into device
|
||||
for (var l = contentSection.length; l--;) {
|
||||
if ((topCache[l] - currentTop) < windowHeight) {
|
||||
|
@ -148,6 +136,31 @@ $(function() {
|
|||
}
|
||||
}
|
||||
|
||||
// Platform toggle
|
||||
var initializeToggle = function () {
|
||||
platformToggle = $('.platform-toggle');
|
||||
|
||||
// Toggle placment
|
||||
toggleTop = platformToggle.offset().top;
|
||||
toggleHeight = platformToggle.outerHeight();
|
||||
|
||||
calculateToggle();
|
||||
}
|
||||
var calculateToggle = function () {
|
||||
var currentTop = win.scrollTop();
|
||||
|
||||
console.log('yep');
|
||||
|
||||
if(currentTop >= toggleTop) {
|
||||
platformToggle.addClass('fixed');
|
||||
$('.docs-components').css('padding-top', toggleHeight);
|
||||
} else if (currentTop <= $('.docs-header').outerHeight()) {
|
||||
platformToggle.removeClass('fixed');
|
||||
$('.docs-components').css('padding-top', 0);
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on('load resize', initialize);
|
||||
$(window).on('load', initializeToggle);
|
||||
$(window).on('load', function () { new FingerBlast('.device-content'); });
|
||||
});
|
||||
|
|
|
@ -312,24 +312,24 @@ body {
|
|||
.segmented-controller {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
border-color: #fff;
|
||||
border-color: #00d1fe;
|
||||
background-color: transparent;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
border-color: #fff;
|
||||
border-color: #00d1fe;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
color: #00d1fe;
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(255,255,255,.3);
|
||||
background-color: rgba(0,209,254,.3);
|
||||
}
|
||||
&.selected {
|
||||
background-color: #fff;
|
||||
background-color: #00d1fe;
|
||||
|
||||
a {
|
||||
color: #254456;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче