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
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
The demo is keeping the element’s position:fixed and manipulating the left property of the element: var leftInit = $(“.scroll_fixed”).offset().left; var top = $(‘.scroll_fixed’).offset().top – parseFloat($(‘.scroll_fixed’).css(‘margin-top’).replace(/auto/, 0)); $(window).scroll(function(event) { var x = 0 – $(this).scrollLeft(); var y = $(this).scrollTop(); // whether that’s below the form if (y >= top) { // if so, ad the fixed … Read more
How about: table { table-layout: fixed; width: 100%; *margin-left: -100px; /*ie7*/ } td, th { vertical-align: top; border-top: 1px solid #ccc; padding: 10px; width: 100px; } .fix { position: absolute; *position: relative; /*ie7*/ margin-left: -100px; width: 100px; } .outer { position: relative; } .inner { overflow-x: scroll; overflow-y: visible; width: 400px; margin-left: 100px; } <div … 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
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
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
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
Short answer: no. (It is now possible with CSS transform. See the edit below) Long answer: The problem with using “fixed” positioning is that it takes the element out of flow. thus it can’t be re-positioned relative to its parent because it’s as if it didn’t have one. If, however, the container is of a … Read more