Question

当用户滚动一次时，我正试图将英雄部分向上滑出视口。页面的默认状态隐藏了滚动条，但我想在.content-section中使用滚动条。

我发现一个网站正是我正在寻找的http://www.ryanedy.com/

以下是我迄今为止尝试过的内容...... Code Pen Here

fill_parent

Answer 1

而不是你的javascript试试这个

$(document).on('DOMMouseScroll mousewheel', function() {
  $(".hero-section").slideUp(2000, function (){
     $("body").css('overflow','scroll');
  });
});

Try it

Answer 2

为了达到效果，网站在内容部分应用了translate3d(0, 100%, 0)，将其转换为屏幕。

事件处理程序将变换设置为translate3d(0, 0%, 0)以将其转换回屏幕。

使用transition: all 0.7s ease;

为样式更改过渡设置动画

由于内容设置为100％高度并且没有滚动条，因此它实际上是一个触发动画的点击处理程序。

//1. User clicks the element
$('.website-wrapper').click(function() {
    $(".content-section").css("-webkit-transform","translate3d(0, 0%, 0)");
    $(".content-section").css("-ms-transform","translate3d(0, 0%, 0)");
    $(".content-section").css("transform","translate3d(0, 0%, 0)");
});
//2. Height of Hero-Section goes to 0px with a transform.

html, body {
    min-height: 100%;
}

.hero-section {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color:red;
}
.content-section {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;

    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color:green;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="website-wrapper">
  <div class="hero-section"><h1>Hero Section</h1></div>
  <div class="content-section"><h1>Content Section</h1></div>
</div>

</body>
</html>

使用Jquery将div滑出视图端口的滚动事件 - 无法正常工作

2 个答案: