1

この質問をどこに投稿すればよいかわからないため、ポリシーに違反している場合はご容赦ください。

私の質問を明確にするために、Teehan + Lax と同じナビゲーション バーを実現したいと考えています。

ここに彼らのウェブサイトがあります: http://www.teehanlax.com/tools/

気づいたら、下にスクロールするとナビゲーションが自動的に非表示になりますが、上にスクロールすると再び表示されます。

だから私の質問は、どうやってこれを達成したのですか? それは CSS だけですか、それともこれを行うには JavaScript が必要ですか? それが何であれ、これを実装するための情報をどのように見つけることができるかについて、誰かが正しい方向を指し示すことができますか?

ありがとうございました

4

1 に答える 1

7

あなたが望むように純粋なCSSで位置を固定から絶対に変更することはできないので、JavaScriptを使用してそうしました。デモ

function followTo(elem, pos) {
    var element = document.getElementById(elem);        
    window.onscroll = function(e){
        var disFromTop = document.all? iebody.scrollTop : pageYOffset;
        if (disFromTop > pos) {
            element.style.position = 'absolute';
            element.style.top = pos + 'px';
        } else {
            element.style.position = 'fixed';
            element.style.top = 0;
        }
    };
};    
followTo("nav", 100);

正しいスクロール位置を取得するために、この SO 投稿から取得した IE 修正も含まれています。

これは、この SO 投稿から取得した jQuery バージョンです。

編集

zanona が指摘したように、ページのさらに下の場所から上にスクロールするとナビゲーションが表示される機能は含めませんでした。その結果、私は、setInterval

var last = 0,    // The last read top value
    delay = 150, // The delay for the setInterval
    threshold = 30;    // The max scroll distance before showing/hiding the nav

//I always set a variable to my setIntervals in case I want to stop them later on
var navMovement = setInterval(function() {
    var nav = document.getElementById('nav'), // Gets nav object
        pageVertOffset = document.all? iebody.scrollTop : pageYOffset;
    // Happens if the difference in scroll is below the negative threshold
    if(pageVertOffset - last < -threshold) { 
        nav.style.top = "0px"; // Put the nav at the top of the window
    }
    // Happens if the difference in scroll is above the threshold
    else if(pageVertOffset - last > threshold){ 
        nav.style.top = - nav.offsetHeight + "px"; // Hides the navigation
    }
    last = pageVertOffset; // Updates the previous scroll value
}, delay); // Runs every `delay` amount

Javascript バージョン、または必要に応じてjQuery バージョン

私はサイトをかなりうまく再現したと思っていました（しかし、私は子猫を飼っていたので、より良いです.笑）

于 2013-08-04T04:09:02.007 に答える