0

2 つのメニュー (トップ メニューとサイド メニュー) を非表示にして、下にスクロールし始めると最初に表示されるようにする必要があります...たとえば、10 px の後としましょう。誰でも私がこれを達成するのを助けることができますか?

HTML

<div class="wrapper">
    <div class="navigation_top">
    <ul>
        <li>Btn_1</li>
        <li>Btn_2</li>
        <li>Btn_3</li>
        <li>Btn_4</li>
        <li>Btn_5</li>
    </ul>
    </div>

    <div class="navigation_side">
       <ul>        
          <li><a href="#slice1" id="btn_1" class="anchorLink">slice1</a></li>
          <li><a href="#slice2" id="btn_2" class="anchorLink">slice2</a></li>
          <li><a href="#slice3" id="btn_3" class="anchorLink">slice3</a></li>
           <li><a href="#slice4" id="btn_4" class="anchorLink">slice4</a></li>
           <li><a href="#slice5" id="btn_5" class="anchorLink">slice5</a></li>
       </ul>
    </div>

    <div id="slice1"></div>
    <div id="slice2"></div>
    <div id="slice3"></div>
    <div id="slice4"></div>
    <div id="slice5"></div>
</div>

CSS

html, body {height:100%; color:#FFF;}

.wrapper {width:100%; height:100%;}
.navigation_top {width:100%; height:50px; background-color:#000; opacity:.5; line-height:50px; position:fixed;}
.navigation_top ul {list-style:none;}
.navigation_top ul li {float:left; width:20%; display:block;}
.navigation_side {width:200px; height:auto; position:fixed; background-color:#FFF; margin-top:30%;}

#slice1 {width:100%; height:100%; background-color:#CCC;}
#slice2 {width:100%; height:100%; background-color:#999;}
#slice3 {width:100%; height:100%; background-color:#888;}
#slice4 {width:100%; height:100%; background-color:#777;}
#slice5 {width:100%; height:100%; background-color:#666;}

Jクエリ

jQuery(document).ready(function($) {

    $(".anchorLink").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

ここにフィドルがあります：

http://jsfiddle.net/iBertel/GA5NH/11/

4

2 に答える 2

1

scrolljQuery を使用すると、要素のイベントをリッスンできます: http://api.jquery.com/scroll/

スクロール位置は、 http scrollTop: //api.jquery.com/scrollTop/ (またはscrollLeft水平スクロールの場合)で取得できます。

例 ：

$('#myElement').scroll(function() {
    if ($(this).scrollTop() > 10) {
       // Do some stuff
    }
});
于 2012-11-15T14:26:07.183 に答える
1

scroll最初にメニューを非表示にしてから、イベントを聞いてwindow確認しscrollTopます。

jQuery(document).ready(function($) {

    $(".anchorLink").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });

    $('.navigation_top').hide();

    $(window).scroll(function() {
        // the 10 below is the number of pixels down to show the menu
        if ($(this).scrollTop() > 10) $('.navigation_top').show();
        else $('.navigation_top').hide();
    });
});​
于 2012-11-15T14:31:31.483 に答える