2014-11-17 70 views
0

嗨,大家好,我有这个代码我做完了,当滚动侧边栏从底部到顶部移动,但我坚持如何停止滚动一旦侧栏命中主持人的顶部 - 有人可以帮助我吗?jQuery绝对sidebr滚动,停在父母的顶部和底部

代码:

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

我这里有一个小提琴例如:http://jsfiddle.net/06qwtgt6/1/

非常感谢!

回答

0
$(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

+0

去除那从底部到顶部的滚动虽然效果......我需要保持这一点,最糟糕的是当它到达底部,这些也走出容器以及当你向右滚动到底部,固定,因为你完成固定,虽然...... –

+0

我认为我们应该可能得到容器的高度,当侧边栏坐,和计算这样吗?我不知道。 –

+0

当我们在滚动时碰到底部时,你需要修复侧边栏? –