0

我正在使用可爱的pace.js作为我的页面加载器。

我创建了一个#cover在加载过程完成时隐藏所有内容。

#cover{
position:fixed;
top:0;
left:0;
background:#000;
z-index:99999;
width:100%;
height:100%
}

我想要的只是加载完成后要向上滚动的封面和要跟随的内容。所以内容会从页面底部向上滑动。

这个Javascript使封面向上滚动问题是第二部分=从页面底部开始的正文

$(window).load(function() {
    Pace.on('done', function() {
    $("#cover").slideUp(700);
    });
});

这个网站是我想在加载方面实现的： http ://www.ok-rm.co.uk

有什么帮助吗？谢谢。

美联储。

4

2 回答 2

2

您可以尝试这种方法：

$("body").on("click", function(){
	$(this).toggleClass("slideup")
});
html, body {padding:0; margin:0; height:100%;}

#cover {
  position:fixed; top:0; left:0; z-index:1;
  background:#000; color:#FFF;
  width:100%; height:100%;
  transition:.3s;
}

#body {
  transition:.3s;
  position: relative;
  top:100%;
}

body {overflow:hidden;} /* hide scrollbar by default */
body.slideup {overflow:auto;} /* show scrollbar after loading */
body.slideup #cover {top:-100%;} /* slide #cover up */
body.slideup #body {top:0;} /* slide #body up */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cover">Loading Content</div>

<div id="body">
  <h1>Hello Universe</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem dicta suscipit aliquam aperiam rerum libero id non nulla, voluptatibus, ullam omnis voluptatem ab amet ipsa. Alias deserunt magni tempore.</p>
  <p>Voluptate reiciendis in tempora repudiandae, repellat odit eligendi quis. Obcaecati voluptatem eveniet, maiores, dolore modi officiis nesciunt itaque. Perferendis odit porro aperiam, mollitia repudiandae cupiditate, alias ipsa architecto adipisci magni?</p>
  <p>Soluta minima officia provident beatae similique qui nam in facilis, quibusdam. Pariatur odio qui repellendus tenetur quae aperiam molestias eum exercitationem ipsa veniam, doloribus id temporibus doloremque, sapiente facere, cum.</p>
  <p>Inventore officia corporis cumque, eius id quam cupiditate tempora unde, beatae ipsum optio sint expedita modi atque esse exercitationem assumenda quasi nostrum corrupti obcaecati, culpa ea ipsa. Delectus, eum, repellat.</p>
  <p>Reiciendis debitis doloribus aliquam nesciunt dolorem repellendus. Iste, ducimus. Nostrum necessitatibus soluta, impedit laborum quam eaque accusamus error illo iste reiciendis, veniam facilis repudiandae! Iste, accusantium autem corrupti magnam aut!</p>
</div>

逻辑/解释：

基本的 HTML 结构如下：

身体 > #cover + #body

其中#cover 是加载占位符，#body 是包含所有内容的 div。默认情况下，#cover 覆盖整个视口，#body 具有顶部偏移。加载后，#cover 向上移动负顶部偏移，#body 通过移除负偏移向上滑动。

为了演示，我做了点击效果展示。这些更改依赖于transition通过类切换而不是 JavaScript/jQuery 幻灯片功能更改顶部偏移量的 CSS。

在您的情况下，加载代码将是：

$(window).load(function() {
    Pace.on('done', function() {
    $("body").addClass("slideup");
    });
});
于 2016-02-25T11:36:21.277 回答
1

我不明白你为什么要使用position: fixed，只需将#cover元素放在页面的第一个元素并添加带有overflow: hidden属性的正文类，然后slideUp()完成删除类。希望这有助于看到：jsfiddle

编辑：

这是#cover向上滑动的方法，内容如下：jsfiddle

于 2016-02-25T11:31:51.867 回答