4

左側にバーがあり、ユーザーに表示されるサイトがあります。したがって、ユーザーがスクロールすると、サイドバーはページの上部から 5px までスクロールします。それ以降は、そこにロックする必要があります。

もちろん、ビューポートが左のバーよりも小さい可能性があるため、左のバーが画面に完全に収まらないことがあります。劇的ではないけどね。ただし、ユーザーが一番下までスクロールすると、サイドバーの一番下がページのフッターに「ヒット」し、ページとともに再びスクロールするようになります。

ここに私が持っているコードがあります: 私のサイトの基本的なセットアップと私の質問の最初の部分の試み (しかし、あなたはそれがうまくいかないことがわかります): jsfiddle .

質問の最初の部分はかなり明確だと思いますが、2 番目の部分は少し理解しにくいかもしれないので、ここにモックアップ下にスクロールすると を示します。テキストがビューポートの上にあるため、テキストが表示されていないことがわかります。

パート1の私の試みのjsは次のとおりです。

$(document).ready(function () {
    var theLoc = 5;
    var links = $('#left');
    $(window).scroll(function () {
        console.log('scroll');
        if (theLoc >= $(window).scrollTop()) {
            if (links.hasClass('fixed')) {
                links.removeClass('fixed');
            }
        } else {
            if (!links.hasClass('fixed')) {
                links.addClass('fixed');
            }
        }
    });
});

しかし、おそらくCSSの問題です：

.fixed {
    position:fixed;
}

高さなどを再度指定しようとしましたが（非常に大きく表示されるため）、事前に指定しませんでした。

4

1 に答える 1

9

少し前にこれを行いました。これを行うために作成したコードは次のとおりです。 JSFiddle を表示します。

（マークアップを少し変更する必要があるかもしれません。これがあなたのテーブルレイアウトでどれだけうまく機能するかわかりませんdivs。それらを使用してフローティングさせてコンテンツをレイアウトすることをお勧めします。）または、コード/以下のロジックとroll your own独自のレイアウトを使用します。

基本的に、
- 要素を
取得する - ページ読み込み時のサイドバーの位置を取得する
- 取得する#content.outerHeight()

これらの vars を取得したら、元の位置(以下) であるかwindow scrollどうかをテストするか、または を超えているかどうかを確認します。2 つが true の場合は、スティッキー クラスを削除します。スクロールは元の位置です。次に、クラスを追加します(これには があります)。<=sidebarTop positionblogHeightelseif>=sidebar.stickyposition: fixed

JSFiddleを確認してください（ここをクリック）

Javascriptは次のようになります。

// Cache our vars for the fixed sidebar on scroll
var $sidebar = $('#sidebar-nav');

// Get & Store the original top of our #sidebar-nav so we can test against it
var sidebarTop = $sidebar.position().top;

// Edit the `- 10` to control when it should disappear when the footer is hit.
var blogHeight = $('#content').outerHeight() - 10;

// Add the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);

// On window scroll, this fn is called (binded above)
function fixSidebarOnScroll(){

    // Cache our scroll top position (our current scroll position)
    var windowScrollTop = $(window).scrollTop();

    // Add or remove our sticky class on these conditions
    if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop){
        // Remove when the scroll is greater than our #content.OuterHeight()
        // or when our sticky scroll is above the original position of the sidebar
        $sidebar.removeClass('sticky');
    }
    // Scroll is past the original position of sidebar
    else if (windowScrollTop >= sidebarTop){
        // Otherwise add the sticky if $sidebar doesnt have it already!
        if (!$sidebar.hasClass('sticky')){
            $sidebar.addClass('sticky');
        }
    }   
}

HTML : _

<header>This is the header!</header>
<ul id="sidebar-nav" class="nav nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
</ul>
<div id="content">Content in here, scroll down to see the sticky in action!</div>
<div class="clear"></div>
<div id="footer">This is the #footer</div>

CSS : _

/* Sticky our navbar on window scroll */
#sidebar-nav.sticky {position:fixed;top:5px;}

/* Other styling for the html markup */
header {
    border:1px solid #aaa;
    background-color:yellow;
    margin-bottom:5px;
    height:50px;
}
#sidebar-nav {
    width:150px;
    border:1px solid #ddd;
    margin:0;
    padding:0;
    float:left;
}
#sidebar-nav li {
    list-style:none;
    border:1px solid #ddd;
    margin:10px;
    padding:2px;
}
#content {
    height:2000px;
    width:500px;
    padding:10px;
    border:1px solid #ddd;
    margin:0 0 10px 5px;
    float:right;
}
#footer {
    height:800px;
    border:1px solid green;
    background-color:#ddd;
}
.clear {
    clear:both;
}

:)

于 2013-06-27T08:49:32.863 に答える