I currently have my header sticky but of some reason it has an opacity. I want it to be relative and sticky but I can't assign both to the header.
This is what I have:
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
position: sticky;
top: 0;
}
Use the z-index property to stack your div on top of everything with the position: sticky,
if you mean that you want your header to scroll down with you when you're scrolling, then you're looking for position: fixed.
And for the opacity part, it's most likely your header is inside a div which has the opacity property, so check that as well or get your header div out of it.
Hope this helps.
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
z-index: 99;
position: sticky;
top: 0;
}
<div class="header"> header here</div>
<div>here's another content</div>
It's hard to understand what you want to achieve, so I apologize if this isn't quite what you hope to find.
I tried this:
https://playcode.io/1038441
Here, you see 'Moo' has your styling, and it isn't transparent or translucent. So, I suspect you have another style that's introducing that. You might check to see what your element has inherited, or you might explicitly set your .header to have an opacity of 1 (.header{ opacity: 1;})
As you scroll the blathering text, it scrolls under the 'Moo' header, which is what sticky does.
It can be 'relative' in the sense that you could give a 'top' of 10px, and it will be offset from the top by 10px, but still 'sticking' to the location.
I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:
Something on the page animates using the standard CSS transition property (not transform)
The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
The video is absolutely positioned (used to hack a scaleable ratio)
I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.
Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.
.anim {
width: 50px;
height: 50px;
background: grey;
transition: all 0.2s linear;
transform: rotate(0deg);
color: white;
display: flex;
align-items: center;
justify-content:center;
}
.anim:hover {
background: black;
transition: all 0.2s linear;
transform: rotate(90deg);
}
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="box" class="anim">
<div>
Hover
</div>
</div>
<div id="video-container">
<video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
</video>
</div>
Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?
Such situations with transitions/translates on page you can very often resolve using "magic" transform: translateZ(0) for parent or children elements (depends on situation).
In your case it is enough to add this transform to the #video-container:
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
transform: translateZ(0);
}
Applied solution jsFiddle
This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.
In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.
UPDATE: As of Chrome 77, this issue appears to be fixed.
I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item disappeared while the transformation is being done, only on Google Chrome. Remedy?
This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).
To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.
If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to
make sure there are no manually set values to the 'position' property other than
'static'.
Just spent half an hour searching... Thought this could make it easier for you... regards. :)
Same problem here. I had a sticky header using position:fixed; that flickered in PC Chrome 34. I tried the solutions in this thread, position:static; in the parent broke other parts. But I know adding -webkit-transform: translate3d(0,0,0); basically makes Chrome turn that html into a layer so that it won't get repainted. That worked for me.
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
-webkit-transform: translate3d(0,0,0);
/* ...all other CSS... */
}
UPDATE
future-friendly answer is to use the will-change property to create a layer!
W3 specs
CanIUse
MDN definition
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
will-change:top;
/* ...all other CSS... */
}
And I'll be honest, this seems like a weird solution to fix the flicker, but in essence it makes the element a layer, same as translate3d().
Maybe a little late to answer, but it seems that the bug comes with the background-attachment: fixed property in chrome. I found a solution changin its value to "scroll". It will cause a jitterin effect on firefox but you can avoid it using a media-browser query in your CSS, something like this:
.yourstellarlayer{
background-attachment: fixed;
}
/*only for webkit browsers*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.yourstellarlayer{
background-attachment: scroll;
}
}
Hope it helps!
I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
This really bugged me and it almost ruined my night. My fix is to set
background-attachment: scroll;
It worked on my project.
Before this, I had it on fixed. Hope this helps.
For me the issue was the styles attach to the parent elements of the div who has the fixed background, I put -webkit-backface-visibility: inherit; to the two main parents of my fixed div.
in my case I was using foundation off-canvas so it goes like this
.off-canvas-wrap{
-webkit-backface-visibility:inherit;
}
.inner-wrap{
-webkit-backface-visibility:inherit;
}
We had a similar problem with a position: fixed; element. This element contained a relatively positioned container, containing an absolutely positioned image. On CSS transition the image disappeared, when the transition was done is re-appeared.
We tried solving the problem by setting the -webkit-backface-visibility to hidden on several elements, including the body element, but this did not help. With the help of this thread we used Chrome's web inspector to fiddle around with elments' position properties and luckily were able to solve the problem without having to alter the site that much. (all we had to do was change the position of the parent of the fixed element to static)
An update almost 5 years in the future... This still seems to be a problem with chrome. I've tried most of the solutions mentioned including adding:
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
and it is not fixing the stuttering issue. adding background-attachment: scroll takes away the parallax effect which is crucial to the UX of the site. The solution above that mentions adding a parent element is not changing anything for me. Any other ideas from people that have had this issue recently? I'm using Gatsby(React) on the front end.
Here is a solution that works (2014.7.11) at firefox 30.0, chrome 35.0, opera 22.0, ie 11.0:
STEP 1: add these lines at .htaccess:
# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>
detailed description of this problem and how to fix it:
https://code.google.com/p/chromium/issues/detail?id=102706
STEP 2: add images preloading, for example:
var pics = []; // CREATE PICS ARRAY
$(document).ready(function(){
...
preload(
'/public/images/stars.red.1.star.png',
'/public/images/stars.red.2.star.png',
'/public/images/stars.red.3.star.png',
'/public/images/stars.red.4.star.png',
'/public/images/stars.red.5.star.png',
'/public/images/stars.empty.png'
);
...
$('.rating').on('mousemove', function(event){
var x = event.pageX - this.offsetLeft;
var id = getIdByCoord(x); //
if ($(this).data('current-image') != id) {
$(this).css('background-image', 'url(' + pics[id].src + ')');
$(this).data('current-image', id);
}
})
...
})
...
// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
// alert("preload " + arguments[i]);
}
}
P.S. thanks Shawn Altman
My task was to create a page with a parallax effect.
After attempts to fix this by means of CSS I came up with the following solution.
JavaScript:
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{
var itemArr = $('.slider-title');
$(window).scroll(function()
{
var pos = $(window).scrollTop();
var wh = window.innerHeight;
$(itemArr).each(function(i, item){
var p = $(item).position();
var h = $(item).height();
if (p.top + h > pos && p.top < pos+wh)
{
// items ir redzams
var prc = (p.top - pos +h)/wh ;
//console.log(prc);
$(item).css({'background-position':'center '+prc+'%'});
}
});
});
}
CSS:
/*only for webkit browsers*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.slider-title{
background-size:auto;
background-position: center 0%;
}
}
.slider-title would be the item with background-attachment fixed.
So I am on Chrome version 40 and still seeing this issue. The workaround which is working for me at the moment is by creating a inner div setting position relative on that div and making it fit the height of its parent and setting the background on the parent div with a background attachment of fixed:
<section style="background-attachment: fixed;">
<div style="position: relative;">
// Code goes here including absolute posiioned elements
</div>
</section>
The problem seems to occur when you have a position relative and background attachment fixed on the same element in my case.
Hope this helps.
This one is late to party but an amazing discovery,
as I can see mostly css framework users, Bootstrap, Foundation (others) , have issues, and I am sure many of you also have scroll to top js functions that show scroll to top button as user starts scrolling down ,
if you have anything like this ( Bootstrap has it built in )
.fade {
opacity: 0;
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
}
.fade.in {
opacity: 1;
}
or you are showing some element via ,
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
or you are adding any kind of element or element class with transition , on scroll down, via js ( animation.css, waypoints.js, velocity.js )
remove transition/class if possible from that element or recheck when that element appears in order to fix the choppy Chrome issue.
Add the transform property to your element with fixed background image. You can have any set position.
#thediv {
width: 100%;
height: 600px;
position: relative;
display: block;
background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border: 10px solid black;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
https://jsfiddle.net/rkwpxh0n/2/
I've had this problem on overlay div below popup window (randomly disappearing in opera 20) - both animated, and activated by script.
<div class="popupwrapper">
<div id="popupdownload" class="popup">
<h1>Test</h1>
</div>
<div class="popupoverlay"></div>
</div>
.popupwrapper {
display: none;
z-index: 9100;
}
.popupwrapper.active {
display: block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26,26,26,.9);
opacity: 0;
}
.popup {
position: fixed;
top: 30%;
left: 40%;
padding: 48px;
background: #e6e6e6;
z-index: 9101;
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
.popupoverlay.active {
opacity: 1;
}
.popup.active {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
Overlay was positioned absolutely (.popupoverlay), but in container which wasn't positioned in any way. I've copied overlay's absolute positioning to parent (.popup) and it works OK.
.popupwrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9100;
}
I think problem appears only when positioning of parent elements isn't obvious.
Glad if helped anyone. Regards
Seems to bug in Chrome the moment you add any markup on the element. Try removing the background from such element and give it a position:relative. Inside the element add a new div with the dimensions you need and add the background, just don't add any markup inside of it.
Example:
Current:
<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
Corrected:
<div class="container" style="position:relative;">
<div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
Hope it helps!
Another workaround if you must have position: fixed/relative/absolute maybe because you have an absolutely positioned element inside (as was my case) is to create a wrapper div inside of the flickering div and move the position and background property to that.
e.g.
you had -
<div class="background-flickers' style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
Possible workaround
<div class="no-more-flicker!">
<div class="wrapper" style="style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
</div>
I don't have the flicker anymore, apparently the flicker bug does not descend to child containers.
i also had same issues in chrome
it's very simple no need to add any webkit & media tag just follow below steps
1.instead of background:url('path-to-image') set the image like below and set the position as fixed
2.
it will work in chrome as well as IE browser
The issue still persist.
its happening to me on google chrome when i have { background-attachment: fixed; transform: scale(1); transition: transform }
I need background-attachment fixed for parallax effect.
I am scaling my container on scroll.
when tranition and transformed is removed parallax works. Having said that, i can have either one scale effect or parallax effect and not both working on chrome.
Safari doesn't complain and works both like a charm
I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>