Why does position sticky not work?

Submitted by speedbird522 on Sat, 2020-09-19 14:09

Hi guys,

If you click on "AC-brytare" there will be som content on the right.

I want this content (.tabcontent) to automatically scroll down using position: sticky;

How come it does not work?

Best, Anders

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style type="text/css">* {box-sizing: border-box}
 
<body> {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 40%;
height: 100%;
}

How come position sticky does not work?

Submitted by speedbird522 on Thu, 2020-09-17 00:20

Hi all,

How come position sticky does not work for .tabcontent?

If you press "AC-brytare" you can see some content on the right.

I would like .tabcontent (right) to follow down the page as the left menu scrolls.

Thanks,
Anders

* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 40%;
height: 100%;
}

Sticky header problem

Submitted by SeaSky on Fri, 2013-01-25 08:23

Hi!

I am trying to improve an already working but faulty web app for iPhone.
What there is:

The sticky header

<div style="position: fixed; left: 0px; top: 0px; background-image:url('logo.png'); height:51px; width:100%; z-index: 99;"></div>

The div that is beneath the sticky header when content is more than what fills the screen.

<div class="scroll_area">

The div for the above area:

.scroll_area {
	position:			absolute; 
	left:				0px; 
	top:				50px; 
}

Syndicate content