允许一列滚动到内容结尾，然后保持固定 [英] Allow one column to scroll till end of content, and then remain fixed

问题描述

我的html内容中有两列。第一栏是侧边栏，预计内容会受到限制，而第二栏是实际内容，可以是几页长。

我正在尝试要实现的目的是：在滚动页面时，我希望第一列滚动到可见第一列内容末尾的位置，此时，当我向下滚动时，它不应再滚动。第二列应该一直滚动到第一列，固定在上方。注意：当它们滚动时，我需要两列都一起滚动而不是独立滚动。

我尝试使用position：fixed withoverflow-y：auto，但这并没有。似乎行得通。请在此处引用jsFiddle：

解决方案

我希望这对您有帮助

Css

 。固定内容{
职位：固定； 
溢出-y：隐藏; 
宽度：250像素； 
颜色：红色； 
高度：100vh； 
} 
  

Jquery

  jQuery（document）.ready（function（$）{
 $（window）.scroll（function（event）{
 $（'。fixed-content'） .scrollTop（$（this）.scrollTop（））; 
}）; 
}）; 
  

确保已添加了jQuery库

I have two columns in my html content. The first column is a sidebar and is expected to be limited in content, while the second column is the actual content which can be several pages length.

What I'm trying to achieve is this: As I scroll the page, I want the first column to scroll till the point that the end of the first column content is visible, at which point the it should not scroll further as I scroll down. The second column should scroll all the way through, as the first column fixes at the point above. Note: When they do scroll, I need both columns to scroll together and not independently.

I tried using position:fixed with overflow-y: auto, but that doesn't seem to work. Please refer the jsFiddle here: http://jsfiddle.net/a1qn17gw/1/

.fixed-content {
  position: fixed;
  overflow-y: auto;
}

To illustrate, I'm trying to achieve the below as I scroll down the page:

解决方案

I hope this helps you

Css

.fixed-content {
    position: fixed;
    overflow-y: hidden;
    width: 250px;
    color: red;
    height: 100vh;
}

Jquery

jQuery(document).ready(function($) {
    $(window).scroll(function(event) {
        $('.fixed-content').scrollTop($(this).scrollTop());
    });
});

Make sure that you have added the jquery library

这篇关于允许一列滚动到内容结尾，然后保持固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！