3

このウェブサイトのようなナビゲーションを取得したいと思います: http://www.interviewmagazine.com/

約 700 ピクセルほど下にスクロールすると、ナビゲーション バーが表示されます。フェードイン効果のある固定ナビゲーションで、上にスクロールするとフェードアウト効果があります。

彼らがどのようにコードを実行したかを確認しようとしましたが、理解できませんでした。

mootoolsのように聞こえますか？

誰かがそれを助けることができれば、それは素晴らしいことです。ありがとう！

4

4 に答える 4

2

ここでstackoverflowを検索している人にとって、私の試みは次のとおりです。

$(function(){
    // Check the initial Poistion of  Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyheader').css('opacity', '1');
            } else {
                    $('#stickyheader').css({position: 'static', top: '600px'});
                    $('#stickyheader').css('opacity', '0');
            }
    }); 
 });

ここにフィドルのデモがあります http://jsfiddle.net/uFq2k/297/

これは、このコードを少し修正したバージョンです。少し下にスクロールした後に div を貼り付けるにはどうすればよいですか

于 2013-09-11T17:50:17.747 に答える
2

jQuery と CSS を使用してこのようなメニューを作成し、次の場合に必要に応じてクラスを交換できます。

var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
    //do something;
}

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden

クラスをスワップして高さを固定量に変更する

animate({opacity : 1.0}, 'fast', function() {
    //callback;
});

ユーザーがスクロールするときのリスナーを設定する必要がありますが、これで開始できます。必要なのは、jQuery とブラウザー、プロジェクトを管理しやすい部分に分割するための論理的なアプローチ、そして時間だけです。

編集：ここにあなたのフィドルがあります。

http://jsfiddle.net/lazerblade01/fNn7K/26/

于 2012-04-17T01:58:35.847 に答える
1

David Walsh は、彼が ScrollSpy と呼んでいるものを持っています - Twitter のスクロールスパイによく似ています - それは違うことをするだけです。

ツイッターでは、関心のある特定の要素が表示されたときに反応できます。

ウォルシュのプラグインは、ユーザーが特定のしきい値までスクロールして戻ると、反応してイベントを提供できます。

http://davidwalsh.name/mootools-scrollspy

于 2012-04-19T08:26:22.743 に答える
0

Twitter の Bootstrapを試すことができます。2 番目のツールバーを確認してください。

于 2012-04-17T01:52:14.160 に答える