Question

大家好，所以我有这个代码我已经完成了当滚动侧边栏从下到上移动但我坚持如何停止滚动一旦侧边栏击中主要conatiner的顶部 - 有人可能会帮我这个？

代码是：

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

我在这里有一个小提琴示例：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

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

1 个答案: