Home/ Questions/Q 786947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:07:23+00:00

I implemented the code to dislay the bar at the top of the stackoverflow

  • 0

I implemented the code to dislay the bar at the top of the stackoverflow screen: How to show popup message like in stackoverflow

What this does is display the div over top of the div at the top of the page. How can I display the new “bar” div and push the others down? Just like StackOverflow does.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Edit: The immediate reaction to my code below will be to not use the div#removeme tag and instead provide a margin-bottom. However if you are going with position:fixed this won’t work as it attaches itself to the window and not the document.

    This is what i do:

    In my html document:

    <div id="removeme">
    <br /><br />
</div>

<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>

    The CSS for this floating pane is:

     #header {
   position: fixed;
   top: 0px;
   left: 0px;
   text-align: center;
   background-color: #FFE6BF;
   height: 30px;
   border: 1px solid #FFCFA6;
   width: 100%;
  }

    And then use jquery in the <head> tag:

    $(document).ready(function() {
 $('#header').click(function() {
  $('#header').slideUp('fast');
  $('#removeme').remove();
 });
});

    I have an extra <div> tag with id removeme to push the contents down when the floating pane is visible and i remove it whenever the floating pane is hidden.

    • 0