javascript - jQuery 绝对侧边栏滚动，停止在父项的顶部和底部

Question

大家好，我已经完成了这段代码，当滚动侧边栏时，它会从底部向上移动，但我仍然不知道如何在侧边栏到达主容器顶部时停止滚动 - 有人可以帮我解决这个问题吗？

代码是:

$(window).bind('scroll', function () {
    var scrolledY = $(window).scrollTop();
    $('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});

我这里有一个 fiddle 示例:http://jsfiddle.net/06qwtgt6/1/

非常感谢!

Answer 1

 $(document).ready(function () {

    /********************************************************************************/
    /* Parallax Scrolling */

    // Cache the Window object
    var $window = $(window);

    $('[data-type]').each(function () {
        $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
        $(this).data('Xposition', $(this).attr('data-Xposition'));
        $(this).data('speed', $(this).attr('data-speed'));
    });

    // For each element that has a data-type attribute
    $('div[data-type="background"]').each(function () {

        var $self = $(this),
            offsetCoords = $self.offset(),
            topOffset = offsetCoords.top;

        $(window).bind('scroll', function () {

            if (($window.scrollTop() + $window.height()) > (topOffset) &&
                 ((topOffset + $self.height()) > $window.scrollTop())) {

                var yPos = -($window.scrollTop() / $self.data('speed'));

                if ($self.data('offsetY')) {
                    yPos += $self.data('offsetY');
                }

                var coords = '50% ' + yPos + 'px';

                $self.css({ backgroundPosition: coords });

            };

        });

    });

    // For each element that has a data-type attribute
    $('div[data-type="content"]').each(function () {

        $(window).bind('scroll', function () {
            var scrolledY = $(window).scrollTop();


            $('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
        });

    });

     $(window).scroll(function(){

      if ($(this).scrollTop() > 150) {
          $('.sidebar').addClass('fixed');
      } else {
          $('.sidebar').removeClass('fixed');
      }
  });


 });

CSS

.fixed {position:fixed; top:0;}

DEMO