I just can't get it to work right:
I have some sections. Within one section is a div.
And I want this div to be fixed as soon as it's visible and to stop being fixed when the user scrolls to next section.
The div should then be stucked to the bottom of the section it's in.
I hope I can explain it in a right way.
Here is a little sketch to show what I mean
I want to work with position:fixed not with position:sticky because the second one doesn't work most of the time.
Thanks for your help!
Why wouldn't you wanna use sticky? here is an example that seems to do what you want
section {
width: 100%;
height: 100vh;
background: red;
}
section:nth-of-type(odd) {
background: blue;
}
section div {
position: sticky;
top: 0;
height: 100px;
width: 100px;
background: white;
border: 1px solid black;
}
<div class="container">
<section><div>Im sticky</div></section>
<section><div>Im sticky</div></section>
<section><div>Im sticky</div></section>
</div>
Related
The wrapper displays on the top of the first parent element. Good!
The problem:
However the second parent element is on the top of the wrapper element, and I can't figure it out why. It needed behind the child element like the first parent. (In real life it's a modal, but I tried to simplify the problem.)
The parent element is sticky (and I can't change it.)
The wrapper element must be an absolute position element.
I've tried to change z-indexes, add extra wrappers, asked openAI, with no luck.
Basically it looks like this (scss):
.parent {
width: 100px;
height: 100px;
background-color: blue;
z-index: -1;
position: sticky; // <-must be sticky
.wrap {
position: absolute; // <-must be absolute
top: -5px;
left: -5px;
z-index: 1;
width: 50px;
height: 210px;
background-color: red;
}
}
And the HTML:
<div class="parent">
<div class="wrap"></div>
</div>
<div class="parent"></div>
To see in live the simplified problem: https://codesandbox.io/s/sticky-parent-sp3v3b?file=/src/styles.scss
The second blue box need to be behind the red as well.
Any advice would be nice.
Okay so the solution was it needed to add different indexes to the parent element like this:
.parent {
width: 100px;
height: 50px;
background-color: blue;
position: sticky;
border: 1px solid white; // <-must be sticky
&:first-of-type {
z-index: 1;
}
&:last-of-type {
z-index: -1;
}
I'm making a page and I have some problems moving my scrollbar-div across the page, when in the right top corner everything works perfectly but when I try to move it to the center of the page with margin-left; and margin-top; the scrollfunction dose not work anymore! Could this have anything to do with the other elements on my page? Any tips or similar experiences?
Appreciate any help!
This code works, if I ad margin-top: 100px; it stops working!
Html:
<div class="scrollbox" id="style">
<div class="overflow"></div>
</div>
Css:
.scrollbox {
height: 300px;
width: 300px;
margin-left: 700px;
background: #ccc;
overflow-y: scroll;
}
.overflow {
min-height: 700px;
}
#style::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style::-webkit-scrollbar-thumb {
border: 1px solid #000;
}
Well, after posting the question I figured out the answer, or at least one answer, if
position: absolute; is added in the scrollbox{} element in the css code, it is possible to move the scrollbox without losing the scroll-function.
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
I am a novice at CSS/HTML and need help with a certain issue. I am trying to make my opening div (w/ background image) cover the entire screen (which I have done successfully). The problem is, no matter what I try, I cannot get the next div to start after the initial div. I am including my HTML and CSS. Problem is that I cannot cause #map-contain to start after #opening. Thought it would simply be 'positioning' issue but I cannot solve this. Please help. http://jsfiddle.net/nELQF/ - (need black div to start at bottom of red div)
HTML
<div id="opening">
</div>
<div id="map-section">
</div>
CSS
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
#opening {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid orange;
background-image: url('DSC_0577.JPG');
background-position: center;
background-size: cover;
}
#map-section {
width: 100%;
height: 800px;
background-color: black;
}
Given that the top element is absolutely positioned, you could do the same with the second element and set top:100% in order prevent the elements from overlapping.
Updated Example
#map-section {
width: 100%;
position: absolute;
height: 800px;
top: 100%;
background-color: black;
}
As an alternative, an arguably better approach allowing you to avoid having to absolutely position both elements would be to simply set a height of 100% on the html/body elements.
Example Here
Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David
One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.
One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.
You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.