locking a div to the top of the screen

Question

I'm trying to lock a progress bar to the top of the page (class: outerDiv_S) so if a user scrolls down they will always have a nice view of their progress.

I've tried various proposed solutions from this post without success: How do you create non scrolling div at the top of an HTML page without two sets of scroll bars

/*basic reset*/
* {margin: 0; padding: 0;}

.html_S {
 height: 100%;
    
}
.toast {
    opacity: 1 !important;
}
.body_S {
    min-height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
 font-family: montserrat, arial, verdana;
 background-color: black !important;

}

.reqSpan_S {
    top: -15px;
 position:relative;
}

.reqFieldText_S {
    color: red;
    padding: 0;
    margin: 0;
}

.reqFieldStar_S {
    font-weight: bold;
}
.k-button {
   color: red;
}

.buttonCentre_S {
    clear: left;
    text-align: center;
}

.outerDiv_S {
    width: 85%;
    margin: 50px auto;
    text-align: center;
    position: fixed;
}


#surveyForm {
 top: 135px;
 position:relative;
    width: 85%;
 margin: 50px auto;
 text-align: left;
}
#surveyForm fieldset {
 background: white;
 border: 0 none;
 border-radius: 3px;
 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 padding: 20px 30px;
 
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
}

/*inputs*/
#surveyForm input, #surveyForm textarea {
 padding: 15px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 10px;
 width: 100%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
    text-align: center;
 width: 100px;
 background: #27AE60;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
 width: 100px;
 background: #3498db;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}

/*For Toast not part of surveyForm...*/
.action-button-ok {
 width: 100px;
 background: rgba(255, 255, 255, 0.3);
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}

#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
 font-size: 15px;
 text-transform: uppercase;
 color: #2C3E50;
 margin-bottom: 10px;
}
.fs-subtitle {
 font-weight: normal;
 font-size: 13px;
 color: #666;
 margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
 margin-bottom: 30px;
 overflow: hidden;
 /*CSS counters to number the steps*/
 counter-reset: step;
}
#progressbar li {
 list-style-type: none;
 color: white;
 text-transform: uppercase;
 font-size: 9px;

 /* width should be 100 divided by the number of steps */
 /* this is set in the code dynamically in javascript */
 width: 12.5%;

 float: left;
 position: relative;
}
#progressbar li:before {
 content: counter(step);
 counter-increment: step;
 width: 20px;
 line-height: 20px;
 display: block;
 font-size: 10px;
 color: #333;
 background: white;
 border-radius: 3px;
 margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
 content: '';
 width: 100%;
 height: 2px;
 background: white;
 position: absolute;
 left: -50%;
 top: 9px;
 z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
 /*connector not needed before the first step*/
 content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
 background: #27AE60;
 color: white;
}

.k-dropdown {
    width: 100%;
}
.k-state-selected.k-state-focused {
    background-color: #27AE60;
    border: 0;
}

#surveyForm hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 margin-bottom: 10px;
}


/*  https://stackoverflow.com/a/17541916/1550052   */


.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 10px;
  /*float: left;*/
}

label {
  display:block;
}

.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  visibility: hidden;
  position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{     /* DEFAULT <i> STYLE */
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid #d3d3d3;
  background: #666;
  margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  #27AE60; 
}

<body  class='body_S'> 

   <div class='outerDiv_S'>
  <!-- progressbar -->
  <ul id='progressbar'>
            <li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li>  
  </ul>
        <span class='reqFieldText_S reqSpan_S'><span class='reqFieldStar'>*</span> indicates required field</span>
    </div>
  

 <form id='surveyForm'>
        

        
  <!-- fieldsets -->
  <fieldset >
<h2 class="fs-title">
 Title
  <br /><br /><br /><br /><br /><br /><br /><br />
</h2>
<h2 class="fs-subtitle">
 Subheading
</h2>
          <br /><br />
<h2 class="fs-subtitle">
 1
</h2>
<label>Type of Business
</label>
<br />

<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />

<i></i>Accommodations
</label>
          
          <br /><br />
          
<label class="ckb" for="cb-638-1">
<input type="checkbox"  name="cb-638" id="cb-638-1" value="3224" />

<i></i>Activities
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox"  name="cb-638" id="cb-638-2" value="3225" />

<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox"  name="cb-638" id="cb-638-3" value="3226" />

<i></i>Convention
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />

<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox"  name="cb-638" id="cb-638-5" value="3228" />

<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox"  name="cb-638" id="cb-638-6" value="3229" />

<i></i>Destination
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox"  name="cb-638" id="cb-638-7" value="3230" />

<i></i>Destination
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox"  name="cb-638" id="cb-638-8" value="3231" />

<i></i>Event
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox"  name="cb-638" id="cb-638-9" value="3232" />

<i></i>Technology
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />

<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox"  name="cb-638" id="cb-638-11" value="3234" />

<i></i>Tourism 
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox"  name="cb-638" id="cb-638-12" value="3235" />

<i></i>Venues
</label>




</fieldset>



        
 </form> 
</body>
</html>

And what was the problem with the answers in the other question? — Bálint, Sep 09 '16 at 21:51
Please consider cutting down the HTML and CSS in your example to only the part that's causing the problem; as in a [mcve]. As it is, one has to hunt for the CSS for the progress bar. The fix could be as easy as applying `position:fixed`. — Heretic Monkey, Sep 09 '16 at 21:52
unfortunately, when I do that the solution does not always apply to the application. but point taken. — sucasa, Sep 09 '16 at 22:14
@Bálint for this snippet, they fix the div, but the content below still scrolls over it. I want a total separation — sucasa, Sep 09 '16 at 22:16

cup_of · Accepted Answer · 2016-09-09T23:21:37.933

4

try adding

position: fixed; to outerDiv_S

.outerDiv_S {
    position: fixed;
}

what this does is it secures the div to one position and it will not move when a user scrolls down a page.

you will need to do some styling to fix the positioning of the div and other content though.

the styling you need to do will be something like this

.outerDiv_S {
    width: 85%;
    margin: 0px auto;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    padding-top: 80px;
    box-sizing: border-box;
    background-color: #000;
}

here is a working example of what you are asking for

https://jsfiddle.net/ofk6tq50/1/

edited Sep 09 '16 at 23:21

answered Sep 09 '16 at 21:59

cup_of

6,397
9
47
94

I've managed to fix the div, however content still scrolls over it. – sucasa Sep 09 '16 at 22:13
1

yes, you will need to do some css to position the fixed div/other content appropriately – cup_of Sep 09 '16 at 23:08
1

@etw3 i helped you out with the css you need. check out my updated answer – cup_of Sep 09 '16 at 23:25

score 1 · Answer 2 · answered Oct 14 '19 at 06:50

The use of initial; will most likely perform better for some objects: Like perhaps in a way you have a mobile website and you want your box to stay at top of the page. So that way it moves more still and does not follow the page.

You might want to as well use display: block; which can set the menu to being blocked into placement. Sometimes it might work for certain themes unless try the second method.

.containter {
display: block;
position: initial;
}

Unlike other methods sometimes you might need to set all objects of certain block to the top as well using the function of first margin perhaps -28px to set it towards upwards of 28px. IF your block is placed at a function of above all placement by absolute value. You can change the px value accordingly in as well as a positive value.

Your block might then be above all objects, but as well have no space for the object.

You will have to manually find the highest object header and set: "padding-top: 20px;" accordingly with how much open space you want for your block to be if your block menu is 50px you set then 50px. To have space for the top menu to have open space. As absolute; overwrites over all other objects in its condition.

.h {
padding-top: 50px; 
}
.containcer {
display: block;
margin: -28px 0 0 0px;
position: absolute;
{

locking a div to the top of the screen

2 Answers2