7

ユーザーが下にスクロールしても常に表示されるように、レイアウト内の列を固定しておくのは簡単です。

また、スクロールが開始される前にページが固定されるように、ページがビューポートの外に出るほど下にスクロールされた場合にのみ、ページの下に列を移動することも簡単です。

私の問題は、左側の列が平均的なウィンドウよりも高いため、下にスクロールして左側の列のすべてのコンテンツ (コントロール) を表示できるようにする必要がありますが、同時に上にスクロールすると見たいことです。コントロールの一番上に戻ります。

これが私が達成したいことのビジュアルです： ここに画像の説明を入力

そのため、左の列は常にウィンドウの高さの 100% を占めていますが、ユーザーが下にスクロールすると div の下部が表示され、上にスクロールし始めると、再びウィンドウの上部に達するまで上にスクロールします。そのため、ページをどれだけスクロールしても、div の上部は常に近くにあります。

これを実現するためのjQueryマジックはありますか?

4

3 に答える 3

2

このようなことを意味していましたか？（デモ）

var sidebar = document.getElementById('sidebar');
var sidebarScroll = 0;
var lastScroll = 0;
var topMargin = sidebar.offsetTop;

sidebar.style.bottom = 'auto';

function update() {
    var delta = window.scrollY - lastScroll;
    sidebarScroll += delta;
    lastScroll = window.scrollY;

    if(sidebarScroll < 0) {
        sidebarScroll = 0;
    } else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {
        sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;
    }

    sidebar.style.marginTop = -sidebarScroll + 'px';
}

document.addEventListener('scroll', update);
window.addEventListener('resize', update);

#sidebar {
    background-color: #003;
    bottom: 1em;
    color: white;
    left: 1%;
    overflow: auto;
    padding: 1em;
    position: fixed;
    right: 80%;
    top: 1em;
}

body {
    line-height: 1.6;
    margin: 1em;
    margin-left: 21%;
}

それもほとんど優雅に劣化します…</p>

于 2013-07-10T14:16:03.513 に答える
1

私はあなたのためにフィドルを作りました。スクロールアップまたはスクロールダウンを検出しfixed、その方向に位置アコーディオンを設定します。

http://jsfiddle.net/8eruY/

CSS

aside {
    position:fixed;
    height:140%;
    background-color:red;
    width:100px;
    top:20px;
    left:20px;

}

Javascript

// jQuery でユーザーのスクロール ダウンまたはスクロール アップを検出します

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        $('aside').css('top', '20px');
        $('aside').css('bottom', 'auto');
    }
    else{
        $('aside').css('bottom', '20px');
        $('aside').css('top', 'auto');
    }   
});
于 2013-07-10T13:43:54.537 に答える
0

http://jsfiddle.net/KCrFe/

またはこれ：

.top-aligned {
    position: fixed;
    top: 10px;
}

と

var scrollPos
$(window).scroll(function(event){
    var pos = $(this).scrollTop();

    if ( pos < scrollPos){
        $('.sidebar').addClass('top-aligned');
    } else {
        $('.sidebar').removeClass('top-aligned');
    }

    scrollPos = pos;
});
于 2013-07-10T13:51:57.593 に答える