9

これを実現できるjQueryプラグインがすでにあるかもしれませんが、私が求めていることを正確に行うプラグインが見つかりません。もしあれば、チュートリアルを教えてください、ありがとう。

私の問題は、ページのコンテンツが非常に長く、ページの下部近くをスクロールするとサイドバーが表示されないことです。

そこで、ページを上下にスクロールするときに #sidebar div をブラウザ ウィンドウの上部と下部に貼り付けたいと思います。

私のサイドバーの高さは通常の画面解像度よりも長いので、サイドバーの下部をブラウザー ウィンドウの下部とブラウザーの上部に固定する必要があります。

そのため、下にスクロールし始めると、サイドバーは通常どおりスクロールしますが、サイドバーの最後に到達すると、スクロールしなくなり、上にスクロールし始めると、サイドバーの上部に到達するまでサイドバーが続きます。ブラウザ、それから固執します。逆に。

これは可能ですか？

中心となるシンプルなデザイン レイアウトのjsfiddleを作成しました。サイドバーに点線の境界線を追加したので、サイドバーを固定する必要があります。

http://jsfiddle.net/motocomdigital/7ey9g/5/

アドバイス、またはオンラインのチュートリアルやデモを知っているなら、最高です!

アップデート

@Darek Rossmanによるこの試みをご覧ください

http://jsfiddle.net/dKDJz/4/

彼は基本的なアイデアを機能させています。ただし、上にスクロールすると、上部にスナップします。スクロールアップ/ダウンの動きに合わせてサイドバーを滑らかにする必要があります。ただし、ウィンドウの上部または下部のいずれかに固執します。また、ヘッダー/フッターがビューポートにあるときに位置を固定してはならないため、オーバーレイしません。

ありがとう

4

2 に答える 2

4

私のソリューションでjsfiddleを更新しました。

var $sidebar = $("#sidebar"),
    $window = $(window),
    sidebartop = $("#sidebar").position().top;

$window.scroll(function() {

    if ($window.height() > $sidebar.height()) {
        $sidebar.removeClass('fixedBtm');
        if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) {
            $sidebar.addClass('fixedTop');        
        } else {
            $sidebar.removeClass('fixedTop');
        }
    } else {
        $sidebar.removeClass('fixedTop');
        if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) {
            $sidebar.addClass('fixedBtm');    
        }
                   
        if ($sidebar.offset().top < 0) {
            $sidebar.removeClass('fixedBtm');   
        }
    }
    
});
h1, h2 {
    display: block;
    font-weight: bold;
}

#horizon {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
    overflow: hidden;    
}

#header, #footer {
    width: 480px;
    height: auto;
    overflow: hidden;
    background: teal;
    padding: 10px;
    color: #ffffff;
}

#wrapper {
    width: 500px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
}

#content-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden:
}

#content {
    width: 330px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    padding: 10px;
}

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
}

.fixedBtm {
    margin-left: 350px !important;
    position: fixed;
    bottom: 0;   
}

.fixedTop {
    margin-left: 350px !important;
    position: fixed;
    top: 0;   
}

.post {
    margin: 5px;
    width: 320px;
    background: red;
    float: none;
    overflow: hidden;
    min-height: 175px
}

.buttons li {
    margin: 5px;
    width: 120px;
    background: blue;
    float: none;
    overflow: hidden;
    min-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.buttons li:hover {
    background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="horizon">

    <div id="wrapper">
        
        <div id="header">header</div>
        
        <div id="content-wrapper">
        
            <div id="content">
            
                <h1>Latest Posts</h1>
            
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
            
            </div>
        
            <div id="sidebar">
            
                <h2>Sidebar</h2>
            
                <ul class="buttons">
                    <li>Button 1</li>
                    <li>Button 2</li>
                    <li>Button 3</li>
                    <li>Button 4</li>
                    <li>Button 5</li>
                    <li>Button 6</li>
                    <li>Button 7</li>
                    <li>Button 8</li>
                    <li>Button 9</li>
                
                    <li>Button 10</li>
                    <li>Button 11</li>
                    <li>Button 12</li>
                    <li>Button 13</li>
                    <li>Button 14</li>
                    <li>Button 15</li>
                    <li>Button 16</li>
                    <li>Button 17</li>
                    <li>Button 18</li>
                </ul>
        
            </div>
                
        </div>
        
        <div id="footer">footer</div>
        
    </div>
    
</div>

ウィンドウがサイドバーよりも大きい場合はサイドバーを上部に固定し、サイドバーが大きい場合は下部に固定する必要があります。

于 2012-08-30T02:38:44.190 に答える
2

これには jQuery や JavaScript は必要ありません。これらはすべて、CSS で実現できます position: fixed。

サイドバーセレクターを次のように変更します

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}
于 2012-06-14T18:08:56.007 に答える