How to Keep a Div Always on The Screen, But Not Always in a Fixed Position

Can I keep a DIV always on the screen, but not always in a fixed position?

I posted a sample as a comment, so I suppose I'll write out a full answer to this.

The markup is pretty straight-forward, but there are some important notes for each section.

HTML

<div id="page">
    <div id="header">
        <div id="header-inner"> <!-- Note #1 -->
            <img src="http://placehold.it/300x100" />
        </div>
    </div>
    <div id="content">
        <!-- Some Content Here -->
    </div>
</div>

CSS

#page {
    padding: 100px;
    width: 300px;
}

#header,
#header-inner { /* Note #1 */
    height: 100px;
    width: 300px;
}

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}

JavaScript

//jQuery used for simplicity
$(window).scroll(function(){
  $('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);

  //can be rewritten long form as:
  var scrollPosition, headerOffset, isScrolling;
  scrollPosition = $(window).scrollTop();
  headerOffset = $('#header').offset().top;
  isScrolling = scrollPosition > headerOffset;
  $('#header-inner').toggleClass('scrolling', isScrolling);
});

Note #1

The scrolling header will be attached to the top of the page using position: fixed, but this style will remove the content from content flow, which will cause the content to jump unless its container maintains the original height.

Note #2

Styles belong in CSS, however it may be difficult to properly align some elements with their original position. You may need to dynamically set the left or right css property via JavaScript.

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

Fixed position but relative to container

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 fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

CSS to keep element at fixed position on screen

You may be looking for position: fixed.

Works everywhere except IE6 and many mobile devices.

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

Fixed position div not staying contained in wrapping div, overlays entire screen?

An element with fixed position is positioned relative to the viewport. Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Although you declare position:fixed;, you don't specify a value for the top and left properties. The default value for both properties is auto, which lets the browser calculate the top edge and left edge positions. The calculated edge positions turn out to be the element's top and left edge positions in the normal flow, which is why it moves when you set a margin.

Keeping div always at the middle bottom of the screen with css

You have to add left and right to your div with value 0.
If you also want the your text in the middle you have to add text-align: center;

  <div id="catfish" style="position:fixed; bottom:0; left:0; right:0; text-align:center;  z-index:5000; width: 468px; margin: 0px auto;">
        <div style="position:absolute;  margin-bottom:0px; z-index:15;">
            <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
        </div>
        <div>
           Some elemnt here
    </div
    </div>

Hope that helps!

Fixed position Div ALWAYS appear on top?

If the content is obstructed by flash, even with a correct z-index, add wmode="transparent" to the flash embed script.

---

Related Topics