Question

我有一个侧边栏，我想有条件地滚动。我已经提供了结构。在布局中，左侧和右侧都有很多内容。当用户向下滚动时，我想要的是让双方一起滚动。当右侧部分的底部可见时，我希望右侧部分停止上移，并让左侧部分继续滚动。当用户向上滚动时，让左右两个部分都向上滚动。当右侧部分的顶部边缘可见时，我希望右侧部分停止滚动，并让左侧部分继续单独滚动。如何实现这种布局？

.main{
  width : 100%;
}
.mainBody{
  width: calc(100% - 200px);
  background-color: pink;
  display : inline-block;
}
.mainBody div{
  margin-bottom : 500px;
}
.Sidebar{
  display : inline-block;
  width : 200px;
  float: right;
  background-color : yellow;
}
.Sidebar div{
  margin-bottom : 350px;
}

  <div class="main">
    <div class="mainBody">
      <div>Hello World 1</div>
      <div>Hello World 2</div>
      <div>Hello World 3</div>
      <div>Hello World 4</div>
      <div>Hello World 5</div>
    </div>
    <div class="Sidebar">
      <div>Sidebar Section 1</div>
      <div>Sidebar Section 2</div>
      <div>Sidebar Section 3</div>
      <div>Sidebar Section 4</div>
      <div>Sidebar Section 5</div>
    </div>
  </div>

Answer 1

首先获取侧边栏$('#sidebar').height()的高度，并从侧边栏高度减小窗口高度$(window).height();，然后可以应用/添加固定类.fixed-right-bar。如下面的示例所示：-

var sidebarHeight = $('#sidebar').height();
var documentHeight = $(window).height();
$(window).on('scroll', function(){
if($(window).scrollTop() > sidebarHeight-documentHeight){
	$('#sidebar').addClass('fixed-right-bar');
	}
	else{
	$('#sidebar').removeClass('fixed-right-bar');
	}
});

.main{
  width : 100%;
}
.mainBody{
  width: calc(100% - 200px);
  background-color: pink;
  display : inline-block;
}
.mainBody div{
  margin-bottom : 500px;
}
.Sidebar{
  display : inline-block;
  width : 200px;
  float: right;
  background-color : yellow;
}
.Sidebar div{
  margin-bottom : 350px;
}

.fixed-right-bar{ position:fixed; right:0; bottom:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <div class="mainBody">
      <div>Hello World 1</div>
      <div>Hello World 2</div>
      <div>Hello World 3</div>
      <div>Hello World 4</div>
      <div>Hello World 5</div>
    </div>
    <div class="Sidebar" id="sidebar">
      <div>Sidebar Section 1</div>
      <div>Sidebar Section 2</div>
      <div>Sidebar Section 3</div>
      <div>Sidebar Section 4</div>
      <div>Sidebar Section 5</div>
    </div>
  </div>

Answer 2

你是这个意思吗？

$(window).on("scroll", function() {
  wh = $(this).height(),
  st = $(this).scrollTop(),
  side = $(".Sidebar"),
  sh = side.outerHeight();
  
  if( (st + wh) >= sh ) {
    side.addClass("fixed");
  } else {
    side.removeClass("fixed");
  }
})

.main{
  width : 100%;
}
.mainBody{
  width: calc(100% - 200px);
  background-color: pink;
  display : inline-block;
}
.mainBody div{
  margin-bottom : 500px;
}
.Sidebar{
  display : inline-block;
  width : 200px;
  float: right;
  background-color : yellow;
}
.Sidebar div{
  margin-bottom : 350px;
}

.Sidebar.fixed{
  position: fixed;
  right: 0;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="mainBody">
      <div>Hello World 1</div>
      <div>Hello World 2</div>
      <div>Hello World 3</div>
      <div>Hello World 4</div>
      <div>Hello World 5</div>
    </div>
    <div class="Sidebar">
      <div>Sidebar Section 1</div>
      <div>Sidebar Section 2</div>
      <div>Sidebar Section 3</div>
      <div>Sidebar Section 4</div>
      <div>Sidebar Section 5</div>
    </div>
  </div>

Answer 3

如果要在到达底部时停止向右滚动部分，则需要将max-height部分的left设置为该right部分height，同时设置溢出属性....

var sidebarHeight = $('.Sidebar').height();

$(".mainBody").css({"max-height": sidebarHeight, "overflow-y":"scroll"});

.main{
  width : 100%;
}
.mainBody{
  width: calc(100% - 200px);
  background-color: pink;
  display : inline-block;
}
.mainBody div{
  margin-bottom : 500px;
}
.Sidebar{
  display : inline-block;
  width : 200px;
  float: right;
  background-color : yellow;
}
.Sidebar div{
  margin-bottom : 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="mainBody">
      <div>Hello World 1</div>
      <div>Hello World 2</div>
      <div>Hello World 3</div>
      <div>Hello World 4</div>
      <div>Hello World 5</div>
    </div>
    <div class="Sidebar">
      <div>Sidebar Section 1</div>
      <div>Sidebar Section 2</div>
      <div>Sidebar Section 3</div>
      <div>Sidebar Section 4</div>
      <div>Sidebar Section 5</div>
    </div>
  </div>

右侧边栏有条件滚动

3 个答案: