3

我在这里找到了类似的答案，但它对我不起作用。我正在尝试制作滚动单页布局，但使用 css3 动画而不是 jquery animate。我正在拍摄的是将变量集作为散列的位置并将其传递给 transformX()。这是我到目前为止所拥有的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<section id="wrapper">
    <div class="nav-wrapper">   
        <nav>
            <ul>
                <li class="nav-li"><a href="#intro">home</a></li>
                <li class="nav-li"><a href="#work">work</a></li>
                <li class="nav-li"><a href="#about">about</a></li>
                <li class="nav-li"><a href="#contact">contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="home">
        <div id="intro" class="content">
        </div>
    </div>

    <div class="portfolio">
        <div id="work" class="content">
        </div>
    </div>

    <div id="about" class="about">
    </div>

    <div id='contact' class="connect">

    </div>
    <footer>

    </footer>
</section>


<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</body></html>

相关CSS：

html,body {
  height:100%;
  text-align:center;
  transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;

}

和相关的Javascript：

$(".nav-li > a").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }

         //go to destination
         $('body').css('transform', 'translateY('+ dest +')');
                      //('-webkit-transform', 'translateY('+ dest +')');
                      //('-ms-transform', 'translateY('+ dest +')');
                      //('-moz-transform', 'translateY('+ dest +')');
                      //('-o-transform', 'translateY('+ dest +')');
         console.log(dest)
     });

正如您在console.log(dest) 中看到的那样，我绝对得到了'dest' 的正确值。这不可能吗？

4

1 回答 1

9

小提琴示例

更改您的代码

$('body').css('transform', 'translateY(' + dest + ')');

至

$('body').css('transform', 'translateY(-' + dest + 'px)');

您需要指定翻译单位。-ve 标志是向上移动身体而不是向下移动，这是您所期望的。

于 2013-09-05T00:26:31.787 回答