1
|
// Name: Sticky
|
2
|
// Description: Component to make elements sticky in the viewport
|
3
|
//
|
4
|
// Component: `uk-sticky`
|
5
|
//
|
6
|
// Modifier: `uk-sticky-fixed`
|
7
|
//
|
8
|
// States: `uk-active`
|
9
|
//
|
10
|
// ========================================================================
|
11
|
|
12
|
|
13
|
// Variables
|
14
|
// ========================================================================
|
15
|
|
16
|
$sticky-z-index: $global-z-index - 20 !default;
|
17
|
|
18
|
$sticky-animation-duration: 0.2s !default;
|
19
|
$sticky-reverse-animation-duration: 0.2s !default;
|
20
|
|
21
|
|
22
|
/* ========================================================================
|
23
|
Component: Sticky
|
24
|
========================================================================== */
|
25
|
|
26
|
/*
|
27
|
* 1. Resolve frame rate issues on devices with lower frame rates by forcing hardware acceleration
|
28
|
*/
|
29
|
|
30
|
.uk-sticky-fixed {
|
31
|
z-index: $sticky-z-index;
|
32
|
box-sizing: border-box;
|
33
|
margin: 0 !important;
|
34
|
/* 1 */
|
35
|
-webkit-backface-visibility: hidden;
|
36
|
backface-visibility: hidden;
|
37
|
}
|
38
|
|
39
|
/*
|
40
|
* Faster animations
|
41
|
*/
|
42
|
|
43
|
.uk-sticky[class*='uk-animation-'] {
|
44
|
-webkit-animation-duration: $sticky-animation-duration;
|
45
|
animation-duration: $sticky-animation-duration;
|
46
|
}
|
47
|
|
48
|
.uk-sticky.uk-animation-reverse {
|
49
|
-webkit-animation-duration: $sticky-reverse-animation-duration;
|
50
|
animation-duration: $sticky-reverse-animation-duration;
|
51
|
}
|
52
|
|
53
|
|
54
|
// Hooks
|
55
|
// ========================================================================
|
56
|
|
57
|
@if(mixin-exists(hook-sticky-misc)) {@include hook-sticky-misc();}
|
58
|
|
59
|
// @mixin hook-sticky-misc(){}
|