Question

你好，我在使用fullpage.js和斜线CSS文字效果导航抛出部分时遇到问题。我想做的是在中间有一个带斜线效果标题的部分，并能够滚动到它下面的其他部分，其中也有一个带斜线效果标题的部分。简而言之，即使有更多div标签和部分，我也无法向下滚动。

代码如下：

HTML：

<head>

    <link rel="stylesheet" href="dist/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="dist/fullpage.min.js"></script>
    <link rel="stylesheet" href="dist/fullpage.min.css">

</head>

<body>
    <div id="wrapper">
        <div id="section" id="box">
            <div class="slashed">

                <div class="top" title="Wow"></div>
                <div class="bot" title="Wow"></div>

            </div>
        </div>
        <div id="section" id="box">
            <div class="slashed">

                <div class="top" title="Tell"></div>
                <div class="bot" title="Tell"></div>

            </div>
        </div>



    </div>

    <script>

        $(document).ready(function(){
            $('#wrapper').fullpage();
        });

    </script>


</body>

</html>

CSS：

    #box{
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
    height: 100%;
    overflow: hidden
}


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

  background: -webkit-radial-gradient(center, #dc143c, #580818);
  background: -moz-radial-gradient(center, #dc143c, #580818);
  background: -o-radial-gradient(center, #dc143c, #580818);
  background: -ms-radial-gradient(center, #dc143c, #580818);
  background: radial-gradient(center, #dc143c, #580818);
}
.slashed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.slashed .top,
.slashed .bot {
  text-align: center;
  font: 62px/100px arial;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.slashed .top:before,
.slashed .bot:before {
  content: attr(title);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
.slashed .top {
  position: absolute;
  top: 0;
  left: 5px;
  right: 0;
  bottom: 50%;
}
.slashed .top:before {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
}
.slashed .bot {
  position: absolute;
  top: 50%;
  left: 0;
  right: 5px;
  bottom: 0;
}
.slashed .bot:before {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
}

我将不胜感激！！预先感谢。

大幅降低的效果使我无法使用fullpagejs滚动任何想法吗？

0 个答案: