0

特定のポイントまでスクロールしたときに、ページの要素をページと共にスクロールダウンさせようとしています。position: fixed動く別の要素が当たったときに切り替えます。問題は、切り替えたときにposition: fixed、ページの約 4 分の 1 下に移動することです。これは、ページ上の元の位置であるためです。元の位置にジャンプする代わりに、固定に切り替わった位置を使用する方法はありますか?

ここにいくつかのコードがあります：

jQuery(window).scroll(function (event) {
     var    top =  jQuery("accordion").offset().top - parseFloat(jQuery("#accordion").css("marginTop").replace(/auto/, 0));
     // what the y position of the scroll is
     var y = jQuery( "#navigation" ).offset().top + jQuery( "#navigation" ).height();

     // whether that's below the form
     if (y >= top) {
         // if so, ad the fixed class
         jQuery("#accordion").css('position','fixed');
     } else {
            // otherwise remove it
            jQuery("#options_accordion").css('position', '');
         }
});
4

1 に答える 1

1

position: fixed に切り替えた時点で、スティッキー要素の上部位置を設定する必要があります。私が何を意味するかを示す簡単な例を作成しました。

http://jsfiddle.net/BSpyM/

var $sticky = $('.sticky');
var $win = $(window);
var originalStickyPosition = $sticky.offset().top;

// Change this if you want it to switch at some point other
// than the top of the window
var switchPoint = 0;

$win.on('scroll', function (event) {
    var scrollTop = $win.scrollTop();

    if ((originalStickyPosition - scrollTop) <= switchPoint) {
        if (!$sticky.hasClass('stuck')) {
            $sticky.css('top', switchPoint);
            $sticky.css('left', $sticky.offset().left);
            $sticky.addClass('stuck');
        }
    } else {
        if ($sticky.hasClass('stuck')) {
            $sticky.removeClass('stuck');
        }
    }
});
于 2013-07-03T17:27:00.347 に答える