I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.
Related
I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our use of cookies</p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
I want to divide the page after the top bar but it won't change. I want to design a page with three sections but the page also contains menu bar or head bar. I have tried something like below but it doesn't show anything at the top bar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}
.split {
color: white;
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top {
height: 20%;
width: 100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
You shouldn't use a fixed position concept like this in general, but apart from that you need to set top: 20% for the .split sections to leave space at the top for the top bar, plus you shouldn't use color: white on a white background, because text will remain invisible that way (white text on white background)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
.split {
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 20%;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top{
height:20%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
I would like to make continuous pull-out elements. I seem able to create one just fine, but am having difficulties creating any more than that. The effect I am after is that when you scroll down, item 2 gets revealed from underneath, and then when you keep scrolling, item 3 gets revealed from underneath item 2. I'd like this to keep going for as many items I add.
Here's the first snippet, with 3 items. It is not working properly:
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
<div id="item-3" class="slide-item text-center">
Third item!
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Here is another snippet, with only two items, which appears to be working, except the text isn't showing up (it shows up fine on my test page, though).
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
I am looking to add a header to my webpage for a current campaign. I have the code up until this point but it covers my logo and the other header when I add it in. How do I fix this so that it pushes the rest of the page down?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #00AD83;
width: 100%;
}
div#banner-content {
width: 200px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
Banner content will go here
</div>
</body>
</html>
Add a top margin to the content that follows:
#banner + * {
margin-top: 70px; /* or whatever the banner's actual height is */
}