jquery ウェイポイントを使用してスティッキー ナビゲーションを作成しようとしていますが、問題が発生しています。
ページ上
<script src="js/waypoints-sticky.min.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/waypoints-sticky.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(window).resize(function(){
$('#mainsplash').css("height", ($(window).height() - 200) + "px");
});
$('#mainsplash').css("height", ($(window).height() - 200) + "px");
$('.sticky1').waypoint('sticky', {
offset: 0 // Apply "stuck" when element 30px from top
});
});
</script>
CSS
.stuck{position: fixed; top: 0;}
問題 1: div で動作しないようですか? クラス「sicky1」でdivを適用すると、何もしません。ただし、クラス「stick1」を H1 または A タグに適用すると機能します。これをdivで使用する方法はありませんか?
問題 2: スティッキーを複数の要素に適用し、上部に到達したときにそれらを互いに下に配置する方法はありますか。
基本的に私がやろうとしているのは、アコーディオン効果を作成することです。つまり、私のページに 3 つのセクションがあるとします。
製品 - コンテンツ ABOUT -コンテンツ お問い合わせ -コンテンツ。
ユーザーが一番下までスクロールすると、3 つのセクションがページの一番上にくっついている必要があります。
つまり (これらは、隣り合って互いに下にある必要があります) PRODCUT ABOUT CONTACT
- コンテンツ - -フッター-
これが理にかなっていることを願っています。Jquery は私の得意分野ではありません。