CODEWITHSUNDEEP
jqueryhtmlcss
serge
serge

Reputation: 15239

OnePage-scroll: how to keep the banner on top

I have to scroll page by page, having a top menu banner always in the top of the screen.

Here is my fiddle 

$("section").onepage_scroll({
    sectionContainer: "article",
    loop: false
});
html, body {
  height: 100%;
  padding: 0; margin: 0; }

header {
  height: 50px;
  position: absolute;
  top: 0; left: 0; z-index: 100;
  background: yellow; opacity: .5;
  width: 100%; }

section {
  background: beige;
  box-sizing: border-box;
  height: 100%; width: 100%; }

article {
  position: absolute;
  display: table-row;
  background: brown;
  height: 100%; width: 100%; }

article > div {
  float: left;
  width: 50%;
  height: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
  display: table;
  text-align: center; }

article > div div {
  display: table-cell;
  vertical-align: middle; }

article > div:first-of-type { background: red; }
article > div:last-of-type { background: lightgreen; }
<link href="http://www.thepetedesign.com/demos/onepage-scroll.css" rel="stylesheet"/>
<script src="http://www.thepetedesign.com/demos/jquery.onepage-scroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>this is the top banner</header>
<section>
    <article>
        <div>
            <div>1 this is the first cell</div>
        </div>
        <div>
            <div>this is the second</div>
        </div>
    </article>
    <article>
        <div>
            <div>2 this is the first cell</div>
        </div>
        <div>
            <div>this is the second</div>
        </div>
    </article>
    <article>
        <div>
            <div>3 this is the first cell</div>
        </div>
        <div>
            <div>this is the second</div>
        </div>
    </article>
</section>

I need to display the FULL cell in the remaining space out of the banner. The cell should not overflow to the bottom (I should see the blue border at the bottom)

PS.

Setting the margin-top to the section gives this result when scrolling:

enter image description here

that is not good, as I need to see the full "cell" till the bottom on the page...

I need the result like this:

enter image description here

BUT will cell fully in the page (in the picture the bottom part of cell overflows the bottom of the page - e don't see the bottom blue border)!

Upvotes: 2

Views: 417

Answers (2)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5890

Add the following two CSS rules to the section which might serve your purpose: 

<section style=" height: calc(100% - 50px); top:50px;" > <!-- ... -->

JSFiddle Demo.

Note: Adding the rules to the CSS stylesheet is somehow being overridden by the plugin your making use of.

Upvotes: 1

DaFunkyAlex
DaFunkyAlex

Reputation: 1969

Add this to your CSS:

section.onepage-wrapper {
     margin-top: 50px;
}

Remember to adjust the value when changing the height of the header. You can do that with jQuery, too:

$( document ).ready( function() {
    $( "section.onepager-wrapper" ).css({ "margin-top": $( "header" ).height() + "px" });
});

Upvotes: 0

Related Questions