[Proposal] Position: footer-sticky

We already have “position: sticky” for headers that we want to be in the
flow as long as they remain fully visible and “fixed” when they are not.

 

While working on a webapp today, I saw an issue with a footer that should
exhibit a somehow reversed behavior: occupy a room in the document flow, but
be rendered as a fixed-element if doing so would make the element appear
lower in the viewport than if it was rendered in the flow (see example
further).

 

The only solution now to get this kind of effect is to use a script.

 

Do you think it’s worth fixing? (yeah, I admit, pun intended)

François

 

 

 

[1] Footer rendered as fixed when the content is smaller than the viewport:

 

|-----------------------------------(start of viewport)

| Header

| Content of the page

| Content of the page

| 

| 

| Footer (fixed)

|-----------------------------------(end of viewport)

 

 

 

[2] Footer rendered as in-flow when the content goes beyond the viewport and
triggers a scrollbar:

 

|-----------------------------------(start of viewport)

| Header

| Content of the page

| Content of the page

| Content of the page

| Content of the page

| Content of the page         

|-----------------------------------(end of viewport)

| Content of the page

| Footer (in-flow)

|-----------------------------------(end of document)