Question

我有一个我正在处理的布局，需要在滚动一定距离后固定侧边栏。

除非用户滚动到页面的最底部并且我的网站页脚开始与侧边栏重叠，否则此工作正常。

我希望能够做的是，一旦用户向下滚动页面并到达页脚顶部（使用jQuery .offset确定），侧边栏将采用CSS transform:translateY(-XX)值其中-XX表示用户自到达页脚顶部后滚动的距离。

例如，我的页脚高度为190px，因此如果用户滚动到页面的最底部，我的侧边栏将具有transform:translateY(-190px)的CSS属性。如果他们只将20px滚动到页脚，则值为transform:translateY(-20px)

这是我正在使用的代码;

// ==========================================================================
// Sticky ad
// ==========================================================================

var windowHeight = jQuery(window).height();
var adFixer = jQuery('.sidebar');
var adOffset = adFixer.offset();
var adHeight = jQuery('.ad-widget').height();
var scrollOffset = adHeight + 70;
var scrollInnerHeight = windowHeight - scrollOffset;

var footerOffset = $('#footer').offset();

var $document = jQuery(document),
className = 'fixed';

// Only run sticky ad if ad is less than 2/3 of the height
// of the browser window

if ( adHeight < (windowHeight * 0.66) ) {

    $document.scroll(function() {
      if ($document.scrollTop() >= adOffset.top - 70) {

        jQuery('.sidebar').addClass(className);
        jQuery('.sidebar-scrollable').css({ 'top' : scrollOffset });
        jQuery('.scrollable-inner').css({ 'height' : scrollInnerHeight });

      } else if ($document.scrollTop() >= footerOffset.top) {

        // User has scrolled to the top of the footer
        // start applying negative transform:translateY() value to sidebar
        // based on how far user has scrolled into footer

      } else {

        jQuery('.sidebar').removeClass(className);
        jQuery('.sidebar-scrollable').css({ 'top' : 'auto' });
        jQuery('.scrollable-inner').css({ 'height' : 'auto' });

      }
    });

}

jQuery，当用户滚动时，为元素提供匹配距离滚动的

0 个答案: