Question

我被要求为视频游戏开发一个网站。如果您打开小提琴，您将找到该页面的预览。你可以看到中间有一个div（使用此代码）：

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

我在css中设置了属性：

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

这样用户无法向下滚动页面。顺便说一句，当您点击div（id="mezzo"）时，由于此代码，页面向下滚动。

$(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;
    });

  });

id="back"是页面向下滚动时显示的div的ID。

问题

如果你运行那个jsfiddle，你会看到一切都很完美，除了这个事实，当页面向下滚动时，中央div（EndGameTV +带有id="mezzo"的世界杯）仍在中间屏幕。

虽然它设置了position: absolute;，但它不会停留在原来的位置，但它的行为与我设置的position: fixed;相同。

你知道为什么div仍然在屏幕的中心而不是停留在页面滚动时的位置吗？

我在家里看到的： enter image description here

滚动时看到的内容 enter image description here

这是指向真实网页的链接：http://www.mkworldcup.com/test.php

Answer 1

你的问题是，div的位置是根据<body>的位置计算的。当您滚动内容时，您的-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- - 位置保持不变，您的div也是如此。

解决方案：将div #mezzo的位置更改为在div.content-b之后显示，它将起作用。这样它就在DOM树中的正确位置。不需要额外的父div。

您的代码如下：

$('.new-contact.clearfix.invite').focusout(function () {
    $('.invitePartners').valid();
});

Answer 2

解决方法是将父div添加到您的第一个整页内容

$(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/

当页面滚动时，Div消失

2 个答案: