CSS - その前に表示されていないクリックでdivを上に移動

fiddle私はon clickイベントをscrollTopの.panel-twoにアニメーション化したいページがあります。私はいくつかのjQueryプラグインを試しましたが、何も機能していません。私が持っている問題は、divが表示されず、アニメーション化できない場合、scrollTopを使用できないということです。scrollIntoViewCSS - その前に表示されていないクリックでdivを上に移動

これはhtmlです：

<body> 

    <!-- Close button --> 
    <button class="close-button" aria-label="Close menu" type="button" data-close> 
    <span aria-hidden="true">&times;</span> 
    </button> 

    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
    <!-- Menu --> 
    <ul class="vertical menu"> 
     <li><a href="#">Foundation</a></li> 
     <li><a href="#">Dot</a></li> 
     <li><a href="#">ZURB</a></li> 
     <li><a href="#">Com</a></li> 
     <li><a href="#">Slash</a></li> 
     <li><a href="#">Sites</a></li> 
    </ul> 
    </div> 

    <div id="bg"> 
    </div> 
    <div class="panel panel-one"> 
    <div class="panel-inner"> 
     <div class="content"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
      ligula pharetra.</p> 
     </div> 
    </div> 
    </div> 

    <div class="panel panel-two"> 
    <div class="panel-inner"> 
     <h2>Lorem ipsum dolor sit amet</h2> 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
     ligula pharetra.</p> 
    </div> 
    </div> 

</body>

私は画像のクリックで、画面を引き継ぐために関連付けられたdiv要素をスクロールアップしまう画像と.panel-oneのdivにスライダーを持つように計画しています。

.panel-one divは画面全体を引き継ぐ必要があり、ユーザーは下にスクロールできません。 .panel-two divが画像のクリックでスライドした後で、ユーザーはスクロールバックして.panel-one divをもう一度表示する必要があります。画面下で.panel-twoが消えてしまいます。

出典

2016-10-31 Leff

は今panel-oneのトップ件までユーザーがスクロール一度スクロールバーを非表示にするscrollリスナーを追加しますあなたの目標は何か分かりません。ページを次のセクション/ div/panelにスクロールする何らかの「スクロールダウン」/「もっと見る」ボタンを作成しますか？ – Buksy

申し訳ありませんが、私は助けたいと思いますが、何を達成しようとしているのか分かりません。あなたは私たちに見せることができる実用的な例を見たことがありますか？ – zJorge

たぶん、答えは少し遅れているが、私は、これはあなたがpanel-oneに入れ画像のスライダーを持っているのに役立ちます推測：

まず私は、スクロールバー非表示：オン
```
$('body').css('overflow', 'hidden'); 
```

をpanel-oneをクリックすると、panel-twoにアニメートできます。

$(".panel-one").on('click', function() { 
    $('html, body').animate({ 
    scrollTop: $('.panel-two').offset().top 
    }, 1000, function() { 
    $('body').css('overflow', 'auto'); 
}); 
});

は、アニメーションの最後にoverflowをオンにするのを忘れることもありません。デモは、以下を参照してください

$(document).scroll(function() { 
    if ($(window).scrollTop() == 0) 
    $('body').css('overflow', 'hidden'); 
});

：

$(".close-button").on('click', function() { 
 
    if ($("#offCanvas").css('margin-left') < '0') { 
 
    $("#offCanvas").css('margin-left', '0'); 
 
    $(".panel").css('margin-left', '50%'); 
 
    $("#bg").css('margin-left', '50%'); 
 
    } else { 
 
    $("#offCanvas").css('margin-left', '-50%'); 
 
    $(".panel").css('margin-left', '0'); 
 
    $("#bg").css('margin-left', '0'); 
 
    } 
 
}); 
 

 
$('body').css('overflow', 'hidden'); 
 

 
$(".panel-one").on('click', function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $('.panel-two').offset().top 
 
    }, 1000, function() { 
 
    $('body').css('overflow', 'auto'); 
 
    }); 
 
}); 
 

 
$(document).scroll(function() { 
 
    if ($(window).scrollTop() == 0) 
 
    $('body').css('overflow', 'hidden'); 
 
});

#offCanvas { 
 
    position: fixed; 
 
    z-index: 999; 
 
    background-color: black; 
 
    width: 50%; 
 
    margin-left: -50%; 
 
    height: 100%; 
 
} 
 
.close-button { 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 
#bg { 
 
    background-image: url('https://unsplash.it/500?random'); 
 
    background-size: cover; 
 
    z-index: -1; 
 
    animation: zoom 10s; 
 
    height: 100%; 
 
    width: 100vw; 
 
    position: fixed; 
 
    -webkit-animation-fill-mode: forwards; 
 
    background-attachment: fixed; 
 
} 
 
@keyframes zoom { 
 
    0% { 
 
    transform: scale(1, 1); 
 
    } 
 
    100% { 
 
    transform: scale(1.1, 1.1); 
 
    } 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.panel { 
 
    position: relative; 
 
    min-height: 100vh; 
 
    width: 100%; 
 
    z-index: 5; 
 
} 
 
.panel-fixed { 
 
    z-index: 1; 
 
} 
 
.panel-inner { 
 
    padding: 1em; 
 
    width: 100%; 
 
} 
 
.panel-fixed .panel-inner { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 
/* Base */ 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.panel-two { 
 
    background-color: blue; 
 
} 
 
.content { 
 
    position: fixed; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <!-- Close button --> 
 
    <button class="close-button" aria-label="Close menu" type="button" data-close> 
 
    <span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
 
    <!-- Menu --> 
 
    <ul class="vertical menu"> 
 
     <li><a href="#">Foundation</a> 
 
     </li> 
 
     <li><a href="#">Dot</a> 
 
     </li> 
 
     <li><a href="#">ZURB</a> 
 
     </li> 
 
     <li><a href="#">Com</a> 
 
     </li> 
 
     <li><a href="#">Slash</a> 
 
     </li> 
 
     <li><a href="#">Sites</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="bg"> 
 
    </div> 
 
    <div class="panel panel-one"> 
 
    <div class="panel-inner"> 
 
     <div class="content"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
 
      ligula pharetra.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-two"> 
 
    <div class="panel-inner"> 
 
     <h2>Lorem ipsum dolor sit amet</h2> 
 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
 
     ligula pharetra.</p> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-12-02 16:37:43 kukkuz

@Leffこの回答のあなたの考えを教えてください、ありがとう！ – kukkuz

CSS - その前に表示されていないクリックでdivを上に移動

答えて

関連する問題