Question

我在这里找到了类似的答案，但它对我不起作用。我试图制作滚动单页面布局，但通过使用css3动画而不是jquery动画。我正在拍摄的是将变量设置为哈希的位置并将其传递给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)
     });

我肯定会为'dest'获得正确的值，正如您在console.log（dest）中看到的那样。这不可能吗？

Answer 1

Fiddle Example

从

更改您的代码

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

到

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

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

如何使用javascript变量设置transform属性的值

1 个答案: