跟随滚动的侧边栏，但如果比视口高，则滚动自身

7 回答

• 1

  您希望实现的行为称为'affix' . Twitter的Bootstrap前端框架有一个javascript组件，可以做你想要的 . 请检查section about the affix component . 事实上，在那里你还可以看到所需行为的演示，左侧边栏中的菜单被贴上了 .

  您可以为affix init调用的offset参数定义函数，因此可以动态确定何时固定/取消固定元素 . 要查看上下文中的示例，请检查上述链接页面的来源，特别是查找 application.js ，它包含您可以在左侧看到的词缀设置 . 在这里，您可以看到脱离上下文的init代码：

  // side bar
  $('.bs-docs-sidenav').affix({
    offset: {
      top: function () { return $window.width() <= 980 ? 290 : 210 }
    , bottom: 270
    }
  })
  

  也许值得在页面来源中查看 docs.css 样式表，其中包含贴附元素的一些定位和样式 . 检查这可能会解决您的问题，或至少可以给您和想法 .

  回复于 2024-04-17T00:38:45+08:00
• 0

  我对项目有这个确切的想法，这是一个如何实现它的例子

  http://jsfiddle.net/ryanmaxwell/25QaE/

  回复于 2024-04-17T00:38:45+08:00
• 1

  由于这些例子都不适合我，我这样做了，我喜欢分享：

  JS

  $(function () {
      var element = $('.right-container');
      var originalY = element.offset().top;
      var lastOffset = $(document).scrollTop();
      var diffToBottom = element.height() - $(window).height();
  
      $(window).on('scroll', function (event) {
          var scrollTop = $(window).scrollTop();        
          var currentOffset = $(document).scrollTop();
          var isScrollingDown = currentOffset > lastOffset;
  
          if (scrollTop > (diffToBottom + element.height())) {
              if (!element.hasClass('relative')) {
                  element.css('top', scrollTop - (originalY + diffToBottom) + 'px');
                  element.addClass('relative');
              }
  
              if (isScrollingDown) {
                  var newTop = scrollTop < lastOffset ? 0 : scrollTop - (originalY + diffToBottom);
              }
              else if (scrollTop < element.offset().top) {
                  var newTop = scrollTop - (originalY);
              }
  
              element.stop(false, false).animate({
                  top: newTop
              }, 300);
          }
          else {
              if (scrollTop < originalY) {
                  element.removeClass('relative');
              }
  
              element.stop(false, false).animate({
                  top: scrollTop - (originalY)
              }, 300);
          }
  
          lastOffset = currentOffset;
      });
  });
  

  CSS

  .relative {
      position: relative;
  }
  

  当元素击中底部时它会顺畅地向下滚动，当顶部被击中时它会向上滚动 .

  回复于 2024-04-17T00:38:45+08:00
• 0

  你可以用Sticky Sidebar https://abouolia.github.io/sticky-sidebar/#examples

  你想要"Scrollable Sticky Element"行为见这里的例子https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html

  回复于 2024-04-17T00:38:45+08:00
• 20

  这样的事可能有用 . 我没有测试过，但理论上看起来不错 .

  $(function(){
      var standardPosition = $('whatYouWantToScroll').offset().top;
      // Cache the standard position of the scrolling element
      $(window).scroll(function() {
          if ($(this).scrollTop() < standardPosition) {
              // if scroll pos is higher than the top of the element
              $('whatYouWantToScroll').css({
                  position: 'relative',
                  top: '0px'
              });
          } else if ($(window).scrollTop() > $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())) {
              // if scroll position is lower than the top offset of the bottom reference
              // + the element that is scrolling height
              $('whatYouWantToScroll').css({
                  position: 'absolute',
                  top: $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())
              });
          } else {
              // otherwise we're somewhere inbetween, fixed scrolling.
              $('whatYouWantToScroll').css({
                  position: 'fixed'
              });
          }
      });
  });
  

  回复于 2024-04-17T00:38:45+08:00
• 0

  我需要这个网站的确切功能，这就是我提出的，它似乎工作得很好......我知道这篇文章很老，但我认为有些人可能对此感兴趣;）

  (function($){
      $(document).ready(function(){
      sidebar_offset=$('#header').height()+10;
      $(window).scroll(function(){
          var sidebar=$('#primary');
      if($(this).scrollTop()<sidebar_offset){
          var height=$(window).height()-(sidebar_offset-$(this).scrollTop());
          css={height:height,marginTop:0};
          sidebar[0].scrollTop=0;
      }else{
          css.height=$(this).height();
          if($(this).scrollTop()>sidebar_offset){
              if(this.lastTop>$(this).scrollTop()){
                  sidebar[0].scrollTop=sidebar[0].scrollTop-(this.lastTop-$(this).scrollTop());
              }else{
                  sidebar[0].scrollTop=sidebar[0].scrollTop+($(this).scrollTop()-this.lastTop);
              }
  
              css.marginTop=($(this).scrollTop()-sidebar_offset)+'px';
          }else{
              sidebar[0].scrollTop=0;
          }
       }
       sidebar.css(css);
       this.lastTop=$(this).scrollTop();
      });
  })(jQuery);
  

  回复于 2024-04-17T00:38:45+08:00
• 3

  你还问了一些例子;我经常遇到的一个例子是Facebook右栏广告 . 它比视口高，滚过第一个或第二个广告，在第三个广告停止 . 我认为这是由第三个广告的位置而不是侧边栏的整体高度来定义的，但它是一个有效的例子 .

  http://facebook.com

  screenhots：http://i.imgur.com/dM3OZ.jpg /页面顶部http://i.imgur.com/SxEZO.jpg /再往下走

  回复于 2024-04-17T00:38:45+08:00