jquery - 切换到固定位置时使用新位置

Question

当您向下滚动到某个点时，我试图让我的页面上的元素随着页面向下滚动。当另一个移动的元素碰到它时，我让它切换到 position: fixed 。问题是，当它切换到 position: fixed 时，它会向下移动大约四分之一的页面，因为那是它在页面上的原始位置。有没有办法利用它切换到固定位置时的位置，而不是让它跳到原来的位置？

这是一些代码:

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', '');
         }
});

Answer 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');
        }
    }
});