3

「+」記号をクリックすると展開できるフッターを作成したいと考えています。最初は、著作権情報とソーシャル メディア リンクのみを含む非常に小さなフッターを作成しました。記号をクリックすると、サイトマップ (およびその他のもの) が著作権情報の上にスライドするようにします。

ただし、ページが完全に下にスクロールされたままになっていることを確認する必要があります。そうしないと、パネルがスライドしますが、見えなくなります..

これは私が今持っているものです：

HTML

<div id="footer-wrapper" class="clearfix">
    <footer>
        <span id="footer-expander">+</span>
        <section id="footer-hidden" class="clearfix">
            <section id="sitemap" class="cols-3">
                <h1>Sitemap</h1>
                <ul>

                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </section>
            <section class="cols-3">
                <h1>Something else</h1>
            </section>
            <section class="cols-3">
                <h1>Last, but not least.</h1>
            </section>
        </section>
        <section id="footer-show" class="clearfix">
            <p>&copy; Helena Standaert.</p>
            <section id="btm-socialmedia" class="socialmedia">
                <ul>
                    <li class="twitter"><a href="">Twitter</a></li>
                    <li class="facebook"><a href="">Facebook</a></li>
                    <li class="linkedin"><a href="">LinkedIn</a></li>
                    <li class="rss"><a href="">RSS-feed</a></li>
                </ul>
            </section>
        </section>
    </footer>
</div>

Jクエリ

$('#footer-expander').click(function(){
    $('#footer-hidden').slideToggle('slow', function(){
        goToByScroll('footer-wrapper')
        if($('#footer-expander').html('-')){
            $('#footer-expander').html('+');
        }
        if($('#footer-expander').html('+')){
            $('#footer-expander').html('-');
        }
    });
})
4

2 に答える 2

1

単純化して、スクロールによってオフになるスクロール間隔を作成します

var pageScroller = setInterval(function(){ 
                       scrollTo(0, document.scrollHeight)}, // Scroll to bottom
                       100 // every 100 ms correct. Can be 50, or 25, or whatever
                    );
$('#footer-hidden').slideToggle(600, function(){
    clearInterval( pageScroller ); // stop the interval which was scrolling
});
于 2013-10-10T10:01:51.557 に答える
0

より簡単な方法は、sliteToggle の STEP オプションを使用することです。

JavaScript を次のように更新するだけです (FOOTER_CONTAINER をフッターのラッパーである適切な要素で変更します)。

$('#footer-expander').click(function(){
    $('#footer-hidden').slideToggle({duration: 'slow', step: function(){
        $(FOOTER_CONTAINER).scrollIntoView(false);
    }, complete: function(){
      goToByScroll('footer-wrapper')
        if($('#footer-expander').html('-')){
            $('#footer-expander').html('+');
        }
        if($('#footer-expander').html('+')){
            $('#footer-expander').html('-');
       }
    }});
});

これにより、関数

$(FOOTER_CONTAINER).scrollIntoView(false);

すべてのステップで呼び出され、コンテナーが表示されるまでスクロールします (false を指定するとコンテナーが下に揃えられます)。

于 2013-10-10T10:56:14.497 に答える