I want to make a sticky like this one. I can't get it to behave as in this example. Can someone help me?
.some-component {
position: sticky;
top: 0;
}
<div class="some-component">
<div class="img">ANY IMAGE</div>
</div>
Related
I've been trying to achieve this scrolling effect from this website: https://livingbeautyinc.com. As you scroll, the previous content stays on the same position and the new content stacks on top of the old one. I've tried using the position:sticky then set the z-index for each component but it doesn't seem to work. Anyone has any idea how to make this scrolling effect with CSS?
Source: https://codepen.io/daniel5120/pen/PoEoaEP
So ideally I want to make the contents on the first container stay exactly the same where they are and then the second element stays on top of the first one.
Your code on codepen did not work with position: sticky due to the height in html and body. If you want to learn more, I think this is the explanation.
Here is your modified codepen code.
And below is an example I did to help me understand why your code didn't work.
html, body {
margin: 0px;
padding: 0px;
}
.pages {
position: sticky;
width: 100%;
height: 100vh;
top: 0;
display: inline-block;
padding: 10px;
box-sizing: border-box;
}
<div class="pages" style="background-color:red;">
<h1>Title RED</h1>
<img src="https://picsum.photos/400/100?random=1">
</div>
<div class="pages" style="background-color:yellow;">
<h1>Title YELLOW</h1>
<img src="https://picsum.photos/400/100?random=2">
</div>
<div class="pages" style="background-color:blue;">
<h1>Title BLUE</h1>
<img src="https://picsum.photos/400/100?random=3">
</div>
<div class="pages" style="background-color:green;">
<h1>Title GREEN</h1>
<img src="https://picsum.photos/400/100?random=4">
</div>
For a client I have to code a website (one pager) with multiple sections one below the other. On the right side in the middle of the viewport should stand the title of each section. It should be (fixed) centered within the viewport and as you scroll through the site the titles should replace each other. It's kinda hard for me to explain so I will attached some sketches.
What I'm trying to achieve
I already thought I had it with the following code:
.section {
position: relative;
z-index: 0;
min-height: 100vh;
overflow: hidden;
}
.title {
position: absolute;
}
.title-inner {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
<div class="section" style="background-color: #d2f8e6">
<div class="title">
<div class="title-inner">
First Section
</div>
</div>
</div>
<div class="section" style="background-color: #6689ff">
<div class="title">
<div class="title-inner">
Second Section
</div>
</div>
</div>
<div class="section" style="background-color: #d2f8e6">
<div class="title">
<div class="title-inner">
Third Section
</div>
</div>
</div>
But that only works in Safari, not in Chrome/Firefox. There all the titles are visibly stacked above each other. That kinda makes sense, as fixed elements create a new stacking context as far as I know. The the image below to see what I mean.
What I actually get (Chrome/Firefox)
Can somebody tell how I might achieve what I need? Even if I have to use JavaScript.
Thanks a lot!
I have a site that I want to add a top bar into, like in the following example: http://demo.codesupply.co/ however I don't want to use an iframe and I cannot amend the current css of the site. I need to be able to create a new div with its own classes that sticks to the top of the site, however my site has got a position:fixed; top:0; navigation bar which is placed on top of the site as well, then they overlap.
How can I place my new top-bar on top of the entire site, without any other element covering up?
*I still cannot see the reason for the downvote, it is a totally legitimate question.
If you don't have access to the CSS then you can use inline CSS and use a 'PUSH' method that does what it means, it pushes the content down the page, so its not overlapping. JsFiddle here: https://jsfiddle.net/SimonHayter/090ar1u0/
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
Hello, I am Menu, nice to meet you.
</div>
<div style="height:40px;width:100%;">
Let's push the page down 40px, you can't see me!
</div>
<div>
Existing Content
</div>
Or you could just edit the existing HTML to add margin-top, i.e:
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
Hello, I am Menu, nice to meet you.
</div>
<div class="container" style="margin-top: 40px;">
This is where your existing content lives.
</div>
If you dislike inline CSS then you can simply add a <style> after the body in HTML5, like so:
<body>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.container {
margin-top: 40px;
}
</style>
<div class="menu">
Hello, I am Menu, nice to meet you.
</div>
<div class="container">
Existing Content
</div>
</body>
If you don't have access to the HTML either then you can use Apache to Modifying static content using a CGI script.
I have two footers at the bottom of my page. I want one of them to always be fixed, then when i scroll to the bottom I want the other to pop-up under it so basically when I reach the bottom of the page, the "normal" footer should be under the fixed footer. Here is what I have so far I'm using the navbar bootstrap class to fix it to the bottom. So what this code does now is when i reach the bottom, the fixed footer is the bottom footer, I want it the other way around.
<footer class="footer" role="footerinfo">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="col-sm-12">
//When I reach the bottom this shoud be top footer
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
//Should not be fixed, be below fixed
</div>
</div>
</div>
</div>
</footer>
Anyone know what kind of css styling i need to fix this
I put together a solution that doesn't use any javascript. Is this what you were looking for?
https://jsfiddle.net/j611yLem/3/
Here is the CSS I used:
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
padding-bottom: 40px;
}
.first-footer {
position: fixed;
bottom: 0;
background: red;
left: 0;
right: 0;
padding: 10px;
color: #FFF;
}
.second-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: blue;
padding: 10px;
color: #FFF;
}
Essentially, you have the first footer be fixed in position, and the second footer absolutely positioned to the bottom of the container.
I wasn't sure if you meant positioned on top of the footer (hiding it) or slightly above. If you want the second footer to cover the first, change the bottom padding of the container to 0px.
I think this person's question could help you do exactly that: Stop fixed position at footer
Basically the footer stays fixed until it's within a certain range then the css style changes to absolute. Take a look at the live demo from the top rated answer.
Check the offset when you scroll:
$(document).scroll(function() {
checkOffset();
});
Make the position absolute within a certain range, you'll need to tweak this yourself.
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 10)
$('#social-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // restore when you scroll up
}
And whatever you use instead of #social-float will need to be a sibling of the footer:
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
I hope this helps. Their question is extremely similar to yours so I didn't want to re-invent the solution.
I'm not sure what I would search for, but I believe it's just as simple as changing the type of position: to be used in CSS.
I have a Container DIV (width: 960px), and I want an orange "bar" in it somewhere, but it will be wider than its container, it will be 100%. How can I achieve this?
You can use absolute positioning to achieve this effect.
HTML:
<div id="wrapper">
<div id="orange-bar"></div>
</div>
CSS:
#orange-bar {
position: absolute;
left: 0;
right: 0;
}
JS Fiddle: http://jsfiddle.net/Xh8uL/2/