From 13607499e14ff9bedd0ba4ae1109a166cb3fc00b Mon Sep 17 00:00:00 2001 From: "g.chanaud" Date: Tue, 26 Apr 2016 22:01:03 +0200 Subject: [PATCH 1/3] [Doc] Sticky : Add documentation about stick-to-bottom. Visual test fixed + stick-to-bottom test --- docs/pages/sticky.md | 56 ++++++++++++++++++- test/visual/sticky/anchors-with-callouts.html | 35 ++++++++---- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/docs/pages/sticky.md b/docs/pages/sticky.md index fae0b001e5..6cfd045620 100644 --- a/docs/pages/sticky.md +++ b/docs/pages/sticky.md @@ -56,7 +56,7 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi ```html
-
+
@@ -65,7 +65,11 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi
-
+
+

+ The image to the right will be sticky when it hits the top of this paragraph element. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -73,6 +77,52 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ The image to the right will lose stickiness when it hits the bottom of this paragraph element. +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+
+ +
+
+
+
+ +## Stick to bottom + +You can also stick to bottom. +Using `data-stick-to="bottom"`. +Here is an example using two anchors (like above) with a stick to bottom. +```html +
+
+ +
+
+``` + + +
+
+
+

+ The image to the right will be sticky when it hits the top of this paragraph element. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ The image to the right will lose stickiness when it hits the top of this paragraph element. +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -80,7 +130,7 @@ You can also use two anchors, if you please. Using `data-top-anchor="idOfSomethi

-
+
diff --git a/test/visual/sticky/anchors-with-callouts.html b/test/visual/sticky/anchors-with-callouts.html index a9532ab189..979c630cc9 100644 --- a/test/visual/sticky/anchors-with-callouts.html +++ b/test/visual/sticky/anchors-with-callouts.html @@ -10,9 +10,9 @@ background-color: darkgrey; } - .sticky-container { - background-color: #f00; - transition: height .5s ease; + .container { + background-color: rgba(255,0,0,0.7); + } .foo { @@ -72,8 +72,8 @@

#foo3

#foo4

-
Test 4
-

I should stick to the top of #foo4 and the bottom of #foo5.
I'm a child of #foo4

+
Test 3
+

I should stick to the top of #foo4 and the top of #foo6.
I'm a child of #foo4

Go to Sticky Docs
@@ -87,9 +87,9 @@

#foo6

#foo7

-
-
Test 5
-

I should stick to the top of #foo6 and the bottom of #foo7, but I don't go to the top of #foo6 because I'm a child of #foo7. Is this normal?

+
+
Test 4
+

I should stick to the top of #foo6 and the bottom of #foo8. I'm a child of #foo7.

Go to Sticky Docs
@@ -100,15 +100,28 @@

#foo8

#foo9

-
+

#foo10

+
+
+
Test 5
+

I should stick to the top of #foo10 and the bottom of #foo11. I should be stick to the window bottom.

+ Go to Sticky Docs +
+
+
+
+

#foo11

+
+
+

#foo12

-
Test 3
+
Test 6

I should stick to the top and bottom of #foo3.
I'm not the child of any of you #foo's.
When I'm not stuck I jump to the top because I'm not a child of the top anchor, is this my normal behavior?

Go to Sticky Docs
@@ -122,4 +135,4 @@
Test 3
$(document).foundation(); - \ No newline at end of file + From b2208ab39cc6bfa4d25d56f13c0a852d0b8a7fad Mon Sep 17 00:00:00 2001 From: "g.chanaud" Date: Sat, 30 Apr 2016 14:25:56 +0200 Subject: [PATCH 2/3] Adding bottom margin information --- test/visual/sticky/anchors-with-callouts.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/visual/sticky/anchors-with-callouts.html b/test/visual/sticky/anchors-with-callouts.html index 979c630cc9..afb53ad2f7 100644 --- a/test/visual/sticky/anchors-with-callouts.html +++ b/test/visual/sticky/anchors-with-callouts.html @@ -105,7 +105,7 @@

#foo10

Test 5
-

I should stick to the top of #foo10 and the bottom of #foo11. I should be stick to the window bottom.

+

I should stick to the top of #foo10 and the bottom of #foo11. I should be stick to the window bottom with a bottom margin of 1em (default bottom margin).

Go to Sticky Docs
From 69959b875ed9687e30194dbda2e61e6838cd1141 Mon Sep 17 00:00:00 2001 From: "g.chanaud" Date: Sat, 30 Apr 2016 19:24:42 +0200 Subject: [PATCH 3/3] Adding more tests --- test/visual/sticky/anchors-with-callouts.html | 83 ++++++++++++++++--- 1 file changed, 71 insertions(+), 12 deletions(-) diff --git a/test/visual/sticky/anchors-with-callouts.html b/test/visual/sticky/anchors-with-callouts.html index afb53ad2f7..de221c90cb 100644 --- a/test/visual/sticky/anchors-with-callouts.html +++ b/test/visual/sticky/anchors-with-callouts.html @@ -12,7 +12,7 @@ .container { background-color: rgba(255,0,0,0.7); - + } .foo { @@ -20,16 +20,25 @@ color: white; } + .megafoo { + height:50rem; + color: white; + } + + .bar { + color: white; + } + .foo h1 { display: inline-block; float: right; } - .foo:nth-child(odd) { + .foo:nth-child(odd), .bar:nth-child(odd), .megafoo:nth-child(odd) { background-color: lightgreen; } - .foo:nth-child(even) { + .foo:nth-child(even), .bar:nth-child(even), .megafoo:nth-child(even) { background-color: lightblue; } @@ -37,7 +46,7 @@ - +
@@ -45,11 +54,11 @@
Test 1

I should stick to the top and bottom of #foo1. I'm not a child of any #foo's.

- Go to Sticky Docs + Go to Sticky Docs
- +

#foo1

@@ -60,7 +69,7 @@

#foo2

Test 2

I should stick to the top and bottom of #foo2.
I'm also a child of #foo2

- Go to Sticky Docs + Go to Sticky Docs
@@ -74,7 +83,7 @@

#foo4

Test 3

I should stick to the top of #foo4 and the top of #foo6.
I'm a child of #foo4

- Go to Sticky Docs + Go to Sticky Docs
@@ -90,7 +99,7 @@

#foo7

Test 4

I should stick to the top of #foo6 and the bottom of #foo8. I'm a child of #foo7.

- Go to Sticky Docs + Go to Sticky Docs
@@ -106,24 +115,74 @@

#foo10

Test 5

I should stick to the top of #foo10 and the bottom of #foo11. I should be stick to the window bottom with a bottom margin of 1em (default bottom margin).

- Go to Sticky Docs + Go to Sticky Docs

#foo11

+
+

#bar1

+
+
+
Test 6
+

I should stick to the top of #bar2 and the bottom of #bar3.

+

Bar containers does not have fixed height, but i should be anchored correctly.

+ Go to Sticky Docs +
+
+

Lorem Ipsum

+
+
+

#bar2

+

Lorem

+
+
+

#bar3

+

Lorem

+

Ipsum

+

Dolor

+
+
+

#bar4

+

Lorem

+

Ipsum

+
+
+

#foo13

+

I'm big to force scroolbar

+

#foo12

+
+
+
Test 7
+

I should stick to the top of #foo12. I should be stick until window end because only data-top-anchor is set.

+ Go to Sticky Docs +
+
+
+
+

#foo13

+
+
+

#foo14

+
+

#foo15

+

I'm big to force scroolbar

+
+ +
-
Test 6
+
Test 8

I should stick to the top and bottom of #foo3.
I'm not the child of any of you #foo's.
When I'm not stuck I jump to the top because I'm not a child of the top anchor, is this my normal behavior?

- Go to Sticky Docs + Go to Sticky Docs