固定位置顯示在某些部分，但隱藏在主頁上

Question

我想知道是否有人可以給我解決方案。

我有一個水平滾動的網站。 我將其分為六個部分，即主頁的第一部分。 此主頁的導航系統與我使用標准水平導航欄的其余部分不同。

我的問題是我需要導航欄保持在其位置上，因此當我向下滾動時，導航欄仍然存在，但我不希望此導航欄顯示在主屏幕上。 無論如何，當我隱藏導航欄時，可以將其固定在網站的不同部分嗎？

任何幫助都感激不盡。 我附上小提琴： http : //jsfiddle.net/zpeua/

非常感謝你們！

剛

HTML

<div id="wrapper">
<div id="mask">
    <div id="item1" class="item">
        <div id="Header" class="effect2">
            <div id="Logo"></div>
            <div id="ContactDetails"></div>
        </div>
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item1"></a>

        <div class="content"></div>
    </div>
    <div id="item2" class="item">
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item2"></a>

        <div class="content"></div>
    </div>
    <div id="item3" class="item">
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item3"></a>

        <div class="content"></div>
    </div>
    <div id="item4" class="item">
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item4"></a>

        <div class="content"></div>
    </div>
    <div id="item5" class="item">
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item5"></a>

        <div class="content"></div>
    </div>
    <div id="item6" class="item">
        <div id="nav" class="Home">
            <ul>
                <li><a href="#item1" class="panel">Home</a>
                </li>
                <li><a href="#item2" class="panel">About</a>
                </li>
                <li><a href="#item3" class="panel">Events</a>
                </li>
                <li><a href="#item4" class="panel">Repertoire</a>
                </li>
                <li><a href="#item5" class="panel">Media</a>
                </li>
                <li><a href="#item6" class="panel">Contact</a>
                </li>
            </ul>
        </div>  <a name="item6"></a>

        <div class="content"></div>
    </div>
</div>

CSS

    body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    text-align:center;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
}
#Header {
    position:fixed;
    z-index:10;
    width:100%;
    text-align:center;
    padding:33px 0;
    background:#FFF;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
    overflow:auto;
}
#nav {
    width:100%;
    position:absolute;
    top:127px;
    text-align:center;
    background:#FFF;
    z-index:999;
    padding-top:7px;
}
#nav ul {
    width:100%;
    max-width:1015px;
    margin:0 auto;
    list-style:none;
    display:inline-block;
}
#nav ul li {
    float:left;
    width:auto;
    margin:0 60px 0 60px;
}
#nav li a {
    color:#999;
}
#nav li a:hover {
    color:#000;
}
#mask {
    width:600%;
    height:100%;
    background-color:#fff;
}
.item {
    width:16.6%;
    height:100%;
    overflow-y:scroll;
    float:left;
    background-color:#fff;
}
.content {
    width:100%;
    height:100%;
    top:165px;
    margin:0 auto;
    background-color:#fff;
    position:relative;
}
.selected {
    background:#fff;
    font-weight:700;
}
.clear {
    clear:both;
}

JS

$(document).ready(function () {

$('a.panel').click(function () {

    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);

    return false;
});

$(window).resize(function () {
    resizePanel();
});

});

function resizePanel() {

width = $(window).width();
height = $(window).height();

mask_width = width * $('.item').length;

$('#debug').html(width + ' ' + height + ' ' + mask_width);

$('#wrapper, .item').css({
    width: width,
    height: height
});
$('#mask').css({
    width: mask_width,
    height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

;(function( $ ){

var $scrollTo = $.scrollTo = function( target, duration, settings ){
    $(window).scrollTo( target, duration, settings );
};

$scrollTo.defaults = {
    axis:'xy',
    duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};

// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ){
    return $(window)._scrollable();
};

// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
    return this.map(function(){
        var elem = this,
            isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;

            if( !isWin )
                return elem;

        var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

        return $.browser.safari || doc.compatMode == 'BackCompat' ?
            doc.body : 
            doc.documentElement;
    });
};

$.fn.scrollTo = function( target, duration, settings ){
    if( typeof duration == 'object' ){
        settings = duration;
        duration = 0;
    }
    if( typeof settings == 'function' )
        settings = { onAfter:settings };

    if( target == 'max' )
        target = 9e9;

    settings = $.extend( {}, $scrollTo.defaults, settings );
    // Speed is still recognized for backwards compatibility
    duration = duration || settings.speed || settings.duration;
    // Make sure the settings are given right
    settings.queue = settings.queue && settings.axis.length > 1;

    if( settings.queue )
        // Let's keep the overall duration
        duration /= 2;
    settings.offset = both( settings.offset );
    settings.over = both( settings.over );

    return this._scrollable().each(function(){
        var elem = this,
            $elem = $(elem),
            targ = target, toff, attr = {},
            win = $elem.is('html,body');

        switch( typeof targ ){
            // A number will pass the regex
            case 'number':
            case 'string':
                if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
                    targ = both( targ );
                    // We are done
                    break;
                }
                // Relative selector, no break!
                targ = $(targ,this);
            case 'object':
                // DOMElement / jQuery
                if( targ.is || targ.style )
                    // Get the real position of the target 
                    toff = (targ = $(targ)).offset();
        }
        $.each( settings.axis.split(''), function( i, axis ){
            var Pos = axis == 'x' ? 'Left' : 'Top',
                pos = Pos.toLowerCase(),
                key = 'scroll' + Pos,
                old = elem[key],
                max = $scrollTo.max(elem, axis);

            if( toff ){// jQuery / DOMElement
                attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );

                // If it's a dom element, reduce the margin
                if( settings.margin ){
                    attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
                    attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
                }

                attr[key] += settings.offset[pos] || 0;

                if( settings.over[pos] )
                    // Scroll to a fraction of its width/height
                    attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
            }else{ 
                var val = targ[pos];
                // Handle percentage values
                attr[key] = val.slice && val.slice(-1) == '%' ? 
                    parseFloat(val) / 100 * max
                    : val;
            }

            // Number or 'number'
            if( /^\d+$/.test(attr[key]) )
                // Check the limits
                attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );

            // Queueing axes
            if( !i && settings.queue ){
                // Don't waste time animating, if there's no need.
                if( old != attr[key] )
                    // Intermediate animation
                    animate( settings.onAfterFirst );
                // Don't animate this axis again in the next iteration.
                delete attr[key];
            }
        });

        animate( settings.onAfter );            

        function animate( callback ){
            $elem.animate( attr, duration, settings.easing, callback && function(){
                callback.call(this, target, settings);
            });
        };

    }).end();
};

// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ){
    var Dim = axis == 'x' ? 'Width' : 'Height',
        scroll = 'scroll'+Dim;

    if( !$(elem).is('html,body') )
        return elem[scroll] - $(elem)[Dim.toLowerCase()]();

    var size = 'client' + Dim,
        html = elem.ownerDocument.documentElement,
        body = elem.ownerDocument.body;

    return Math.max( html[scroll], body[scroll] ) 
         - Math.min( html[size]  , body[size]   );

};

function both( val ){
    return typeof val == 'object' ? val : { top:val, left:val };
};

})( jQuery );

Answer 1

您可以輕松地將標題固定在頁面頂部，並使用jQuery來檢測$（document）.ready（）中您所在的頁面，並在首頁上隱藏標題。 因此，在您的$（'a.panel'）。click（）中，您只需要這樣做：

if($(this).html() == 'Home' && !$('#HomeNavId').is(':visible')) { $('#HomeNavId').show(); } else { $('#HomeNavId').hide(); }