CODEWITHSUNDEEP
jqueryhtmlcss
Alberto Rossi
Alberto Rossi

Reputation: 1800

Div disappears when page scrolls

Fiddle: http://jsfiddle.net/ud6hejm6/

I was asked to develop a website for a videogame tournament. If you open the fiddle, you will find a preview of the page. There is a div in the middle as you can see (with this code):

<div class="middle teko" id="mezzo">
 <span style="color: purple">EndGame</span><span style="color: yellow">TV</span> &nbsp; + &nbsp; World Cup
</div>

I set in the css the property:

html, body {
    height:100%;
    overflow: hidden;
  }

In this way the user can't scroll down the page. By the way, when you click in the div (id="mezzo"), the page scrolls down thanks to this code.

$(document).ready(function() {

    $('#mezzo').click(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
        return false;
    });

    $('#back').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

  });

The id="back" is the id of the div shown when the page scrolls down.

The Problem

If you run that jsfiddle, you will see that everything works perfectly except for the fact that, when the page scrolls down, the central div (the EndGameTV + World Cup one with id="mezzo") remains in the middle of the screen.

Although it has set position: absolute;, it doesn't stay where it is but it behaves like I set position: fixed;.

Do you know why the div remains on the center of the screen instead of staying where it is when the page scrolls?

What I see in the home: enter image description here

What I see when I scroll enter image description here

This is the link to the real page: http://www.mkworldcup.com/test.php

Upvotes: 0

Views: 2308

Answers (2)

cari
cari

Reputation: 2300

your problem is, that the position of your div is calculated from the position of <body>. when you scroll your content, your <body>-position stays the same, so does your div.

solution: change the position of div#mezzo to appear after div.content-b and it will work. This way its at the correct position in the DOM tree. no additional parent div needed.

your code would look like:

-snip-

<div class="content-b">
    <img alt="Mario Kart 8 - World Cup" src="/images/mk8.png">
</div>
<div id="mezzo" class="middle teko" onclick="document.getElementById('mezzo').visibility = 'hidden';">
    <span style="color: purple">EndGame</span>
    <span style="color: yellow">TV</span>
      +   World Cup
</div>

-snip-

Upvotes: 1

Roi
Roi

Reputation: 565

The solution to this is add a parent div to your first whole page content

$(document).ready(function() {
   
    $('#mezzo').click(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
        return false;
    });

    $('#back').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
    
  });
.background {
   background-color: #232323;
  }
  
  .background1 {
    background-repeat:no-repeat;
    background-size: 100%;
    transition: background-color 0.3s ease;
    background-color: #222;
  }
  
  .teko {
    font-family: 'Teko';
    font-size: 30px;
   }

  .background2 {
    background-repeat:no-repeat;
    background-size: 100%;
    transition: background-color 0.3s ease;
    background-color: #333;
  }

  .background1:hover, .background2:hover {
    background-color: #545454;
  }

  html, body {
    height:100%;
    overflow: hidden;
  }
  
  .fullscreen, .content-a {
    width:100%;
    min-height:100%;
    cursor: pointer;
  }
  
  .not-fullscreen, .not-fullscreen, .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow, .content-a {
    height: 50%;
    overflow:hidden;
    padding: 0px;
    background-size: cover;
  }

  .content-a {
	display:table;
    padding: 0px;
  }

  .content-b {
	display:table-cell;
    position:relative;
	vertical-align:middle;
	text-align:center;
    padding: 0px;
  }

  body{
    margin:0;
    font-family:sans-serif;
    font-size:28px;
    line-height:100px;
	color:#ffffff;
    text-align:center;
  }

  section {
	background:#9ed100;
  }
  
  .infobutton {
   position: fixed;
   bottom: 20px;
   left: 20px;
   width: 40px;
   height: 40px;
   line-height: 40px;
   border-radius: 100%;
   -moz-border-radius: 100%;
   -webkit-border-radius: 100%;
   background-color: #0099CC;
   cursor: pointer;
   transition: background-color 0.3s ease;
   box-sizing: border-box;
   text-align: center;
   display: table-cell;
   vertical-align:middle;
  }
  
  .mkboards {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   line-height: 40px;
   border-radius: 100%;
   -moz-border-radius: 100%;
   -webkit-border-radius: 100%;
   background-color: #FF9900;
   cursor: pointer;
   transition: background-color 0.3s ease;
   box-sizing: border-box;
   text-align: center;
  }
  
  .welcome {
   position: fixed;
   top: 20px;
   width: 200px;
   height: 40px;
   line-height: 40px;
   color: #222;
   border-radius: 10px;
   background-color: #D8D8D8;
   cursor: pointer;
   transition: opacity 0.5s ease;
   opacity: 0.5;
   text-align: center;
  }
  
  .middle {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 40px;
   width: 300px;
   line-height: 40px;
   margin-top: -20px;
   margin-left: -150px;
   color: #222;
   border-radius: 10px;
   background-color: #D8D8D8;
   cursor: pointer;
   transition: opacity 0.5s ease;
   opacity: 0.5;
   text-align: center;
  }
  
  .middle:hover {
   opacity: 1.0;
  }
  
  .welcome:hover {
   opacity: 1.0;
  }
  
  .infobutton:hover {
   background-color: #33ADD6;
  }
  
  .mkboards:hover {
   background-color: #FFAC30;
  }
  
  a:link, a:visited { text-decoration: none; color: #FFF; }
<div style="height: 100%; position: relative;">
    <div class="not-fullscreen background1" data-img-width="1600" data-img-height="1064">
        <a href="/mk8/"><div class="content-a">
            <div class="content-b">  
             <img src="/images/mk8.png" alt="Mario Kart 8 - World Cup" />
            </div>
        </div></a>
    </div>
      
    <div class="not-fullscreen background2" data-img-width="1600" data-img-height="1064">
        <a href="/mkw/"><div class="content-a">
            <div class="content-b">
             <img src="/images/mkwii.png" alt="Mario Kart Wii - World Cup" />
            </div>
        </div></a>
    </div>
    <div class="middle teko" id="mezzo" onclick="document.getElementById('mezzo').visibility = 'hidden';">
     <span style="color: purple">EndGame</span><span style="color: yellow">TV</span> &nbsp; + &nbsp; World Cup
    </div>
</div>


<div id="endgame" class="fullscreen" style="background-color: #222;" data-img-width="1600" data-img-height="1064">
    <div class="content-a">
        <div class="content-b">
         <div style="margin: auto; width: 98%;">
          <img id="back" src="http://i.imgur.com/jPsBznl.png" alt="EndGameTV" style="max-width:100%; max-height: 100%;" onclick="document.getElementById('mezzo').visibility = 'visible';" />
         </div>
        </div>
    </div>
</div>
</a>

<a href="welcome.php"><div class="welcome teko" style="left: 20px;">
   Welcome
</div>
</a>

<a href="staff.php"><div class="welcome teko" style="right: 20px;">
   Staff
</div>
</a>

<a href="/endgame_rules.pdf" target="blank"><div class="infobutton">
 <div class="content-a">
  <div class="content-b">  
   <img src="/images/qm.png" alt="?" />
  </div>
 </div>
</div></a>

<a href="http://mkboards.com/forums/" name="welcome" target="_blank"><div class="mkboards">
 <div class="content-a">
  <div class="content-b">  
   <img src="/images/qm.png" alt="?" />
  </div>
 </div>
</div></a>

http://jsfiddle.net/53u4kqt0/

Upvotes: 1

Related Questions