Hello everyone! I am struggling to keep an element fixed in place while scrolling. Despite setting the CSS to 'fixed', the header still disappears when I scroll.
Here is the HTML page:
<title>Final Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>
window.open = function(){};
window.print = function(){};
if (false) {
window.ontouchstart = function(){};
}
</script>
<body>
**<div class="fixed">
<h1>Packit<br></h1>
CSS PAGE
/* Reset */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, object, iframe, fieldset {
margin: 0;
padding: 0;
border: 0;
}
input, select {
width: 120px;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header, footer, nav, section, article, hgroup, figure {
display: block;
}
legend {
display: none;
}
...
...
/************End Classes**************/
/************Structure**************/
.container {
max-width: 70em;
margin: 0 auto;
padding: 0 1em;
overflow: hidden;
}