jQuery绝对侧边滚动,停在父级的顶部和底部



大家好,所以我完成了这段代码,当滚动侧边栏时,侧边栏从下到上移动,但我坚持如何停止滚动一旦侧边栏击中主连接器的顶部 - 有人可以帮助我吗?

代码是:

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

我这里有一个小提琴的例子:http://jsfiddle.net/06qwtgt6/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;}

演示

最新更新