Im building a website based on a Horizontal Scroll View, this is made by an move interaction and a sticky section. Inside this sticky section i want to put an sticky div,then, when you scroll horizontaly, one div remains sticky meanwhile you scroll horizontally.
There is an example:
https://studiochevojon.com/
In this website you can horizontal scroll and have a sticky div in determinate moment.
There is my webflow project: https://preview.webflow.com/preview/designfeelings?utm_medium=preview_link&utm_source=dashboard&utm_content=designfeelings&preview=1bd0bbb81feac58ef0d75e3ee82d61d0&mode=preview
Can someone explain me how this works? I try all horizontal scroll tutorials but i dont know how to make this works.
Thank you all.
to be sticky a div needs the style: position: sticky;. Then it needs a broder where ti actually should stick to (top, bottom, left and/or right) and the distance (%, vw/vh, px...). Like in this example
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 500vw;
display: flex;
background-color: red;
}
.page {
width: 100vw;
padding: 5px;
}
#one {
background-color: yellow;
}
#two {
background-color: green;
}
#three {
background-color: grey;
}
#sticky {
display: flex;
position: sticky;
left: 0;
width: 100vh;
background-color: blue;
padding: 5px;
}
<div id="wrapper">
<div class="page" id="one">I'm page 1</div>
<div class="page" id="two">I'm page 2</div>
<div id="sticky">I'm the Sticky Box</div>
<div class="page" id="three">I'm page 3</div>
</div>
Related
I'm trying to get my footer displayed at the bottom of the page. Usually it's just position: fixed and bottom: 0. However I want my footer positioned inside a container (section element), so when the size of my sidebar at the left changes, I want my footer be also moved to the right or left.
I thought I could get use of position: sticky instead of width, but when there's not enough content inside of section element, it is displayed at the bottom of the section, but not at the bottom of the page.
Is there a pure CSS solution for this or have I add some javascript?
body {
margin: 0;
}
.page-body {
display: grid;
grid-template-columns: 7rem calc(100vw - 7rem);
}
.sidebar {
background-color: yellow;
}
section {
position: relative;
width: 100%;
min-height: 100vh;
background-color: green;
}
.content {
padding-top: 400px;
}
footer {
position: -webkit-sticky;
position: sticky;
bottom: 10px;
background-color: blue;
z-index: 999;
padding: 0;
}
<html>
<head>
</head>
<body>
<div class="page-body">
<div class="sidebar">
</div>
<section>
<div>
<div class="content">
Content
</div>
</div>
<footer>
Footer
</footer>
</section>
</div>
</body>
</html>
Remove the padding-top on the .content class add height 100vh to it and remove the bottom:10px on footer can solve your problem
.content {
height:100vh;
}
I want to fix an element to the top and left of the screen using position sticky when scrolling a large div either vertically or horizontally. Fixing to the top is working fine, but fixing to the left is not.
This is my html page:
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div>
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
I also tried using either top or left alone, with the same result.
I must be missing something.
Why is the top position fixed, but not the left position?
How should I fix the page to get the desired behaviour?
The sticky element is a block level element inside another block level so this one is already taking 100% width if its parent element and there is no room for a left sticky behavior.
Add some border to better see:
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
border:2px solid green;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div style="border:2px solid red;">
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
The green box can only stick inside the red one and the lightblue element is overflowing. Addinline-block to sticky element (to remove the width 100% constraint) and to the parent element (so it grows with the lightblue element) and you will have the expected result
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
border:2px solid green;
display:inline-block
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div style="border:2px solid red;display:inline-block;">
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
Erit Vortstenbosch Welcome to the community. I have checked your code its working fine.
Just set margin and padding to 0 for h1 tag.
Here is the modified code snippet.
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
h1 {
padding: 0;
margin: 0;
}
<div>
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
A lot of times the HTML structure for a web page is this:
<div id="full">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Mine's a little different:
<div id="full">
<div id="header"></div>
<div id="body"></div>
</div>
<footer id="footer"></footer><!-- I assume it doesn't matter whether it's a footer or a div -->
And the CSS:
html, body {
height: 100%;
}
body {
position: relative;
min-height: 100%;
direction: rtl;
}
#full {
position: relative;
min-height: 100%;
height: 100%;
padding-top: 2%;
display: flex;
flex-direction: column;
}
#header {
position: relative;
padding-bottom: 2%;
}
#body {
width: 100%;
flex-grow: 1;
background-color: #F6F6F6;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
}
Aside from the structure itself, I think it's worth mentioning that:
The #header's content is pre-known and #body's isn't.
The #body is filling the remaining content after #header (I used the flex method).
I found a lot of examples but each of them had the #footer inside the main container.
My question is:
How do I fix the #footer so it'll stay at the bottom?
I don't know if there's a solution to what I wanted, but I solved it by changing the structure.
As I mentioned in my question, my #body is filling the remaining space after the #header, and everything has to be on top of it (visually, at least), including the footer.
I changed my structure so that the #footer is inside the #body, at the end of it.
That doesn't sound like the right solution but it works for me without causing any other problems.
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}