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 … Read more
You can’t do that without clever hacks. However, you can (and should) use the following CSS to fix zoom issues on mobile devices: header { position: fixed; … } @media only screen and (max-width: 720px) { header { position: absolute; } } This code enables position: absolute when display width is less or equal 720px, … Read more
Check this: // Define the border style of the form to a dialog box. form1.FormBorderStyle = FormBorderStyle.FixedDialog; // Set the MaximizeBox to false to remove the maximize box. form1.MaximizeBox = false; // Set the MinimizeBox to false to remove the minimize box. form1.MinimizeBox = false; // Set the start position of the form to the … Read more
FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed. For what I was trying to do (turning fixed on and off as a way of sticking … Read more
I know it is a bit late for an answer but I’ve had the same problem and was able to fix it by adding these attributes to my css file html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; } From the comments: This solution stops scroll events from firing on the window, … Read more
Live demo first, check its offset every time you scroll the page $(document).scroll(function() { checkOffset(); }); and make its position absolute if it has been downed under 10px before the footer. 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 … Read more
Try the following css: #innerbox { width:250px; /* or whatever width you want. */ max-width:250px; /* or whatever width you want. */ display: inline-block; } This makes the div take as little space as possible, and its width is defined by the css. // Expanded answer To make the buttons fixed widths do the following … Read more
You need some JS to do scroll events. The best way to do this is to set a new CSS class for the fixed position that will get assigned to the relevant div when scrolling goes past a certain point. HTML <div class=”sticky”></div> CSS .fixed { position: fixed; top:0; left:0; width: 100%; } jQuery $(window).scroll(function(){ … Read more
This is not an easy one. I’ve come up with a Script solution. (I don’t think this can be done using pure CSS) the HTML stays the same as you posted, the CSS changes a little bit, JQuery code added. Working Fiddle Tested on: IE10, IE9, IE8, FF, Chrome BTW: if you have unique elements, … Read more
You could consider using CSS clip: rect(top, right, bottom, left); to clip a fixed positioned element to a parent. See demo at http://jsfiddle.net/lmeurs/jf3t0fmf/. Beware, use with care! Though the clip style is widely supported, main disadvantages are that: The parent’s position cannot be static or relative (one can use an absolutely positioned parent inside a … Read more