3

ここでこれに対する同様の回答を見つけましたが、うまくいきません。スクロールする単一ページ レイアウトを作成しようとしていますが、jquery animate の代わりに css3 アニメーションを使用しています。私が狙っているのは、変数セットをハッシュの位置として取り、それを 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 に答える