0

私はこのようなものを持っています:

<div id="navigation"></div>
<div id="header"></div>
<div id="content"></div>

#headerが表示されている (スクロールされていない)"position:fixed; top: 0;"場合を除いて、このようにする必要があります。この場合、 は の後に表示する必要があります。#navigation#header#navigation

これは純粋なcssで行うことができますか?
またはクリーンな JS ソリューションはありますか?

ここにjsfiddleがあります。

4

2 に答える 2

1

jQuery Waypoints プラグインの仕事のようですね: http://imakewebthings.com/jquery-waypoints/

スティッキー要素のショートカットを使用:

追加するだけ

$(document).ready(function() {
    $('#header').waypoint('sticky');
})

スタック要素のスタイル

#header.stuck {
    position: fixed;
    top: 0;
}

これが更新されたフィドルです

于 2013-01-28T00:23:15.610 に答える
0

jQuery を使用したソリューションを次に示します。

更新された JSFiddle

//Checks if navigation is visible and sets position of header accordingly
function headerPosition(){
    if($('#navigation').is(':visible')){
        $('#header').css('position', 'static');
    }
    else{
        $('#header').css('position', 'fixed');
    }
}

//Run function to set correct header position
headerPosition();

//Show/Hide navigation to see function in action - not needed for production
$('button').on('click', function(){
   $('#navigation').toggle();
   headerPosition();
});
于 2013-01-28T00:27:14.843 に答える