Question

我目前正在Angular应用程序中处理表视图，我想制作一个粘性标头以提供更好的用户体验。为了在Chrome和Mozilla中实现这一目标，我使用了以下CSS代码：

div.sticky-table-head {
    overflow-y: auto;
    overflow-x: auto;
    height: 100%;
    width: 100%;
}

.scroll{
    margin-left: auto;
    margin-right: auto;
}

.scroll th {
    position: sticky;
    top: 0;
    background: lightblue;
}

.scroll td {
  text-align: center;
  padding: 5px;
  background: lightgreen;
}

HTML：

<div>
    <table class="scroll">
        <thead>
                <th>
                    <strong>ID</strong>
                </th>
                <th>
                    Column 1
                </th>
                <th>
                    Longer column 2
                </th>
                <th>
                    Column 3 that is longer
                </th>
        </thead>
        <tbody>
            <tr>
                <td>ID</td>
                <td>Data</td>
                <td>DataDataDataData</td>
                <td>DataDataDataDataDataDataDataData</td>
            </tr>

            ...

        </tbody>
    </table>
</div>

我需要在IE 11上实现相同的效果，而不使用任何脚本或jQuery，仅使用Angular机械师。纯CSS和HTML是最好的。

这是JSFiddle提供的当前解决方案：https://jsfiddle.net/bn5L1fhm/

有什么办法可以解决我的问题而又无需更改太多代码？

Answer 1

IE不支持position: sticky，据我所知，没有标准的方法可以仅使用CSS来实现。您需要脚本才能在IE 11中实现此目的。我们只能使用import boto3 # files are referred as objects in S3. # file name is referred as key name in S3 def write_to_s3(filename, bucket_name, key): with open(filename,'rb') as f: # Read in binary mode return boto3.Session().resource('s3').Bucket(bucket).Object(key).upload_fileobj(f) # Simple call the write_to_s3 function with required arguement write_to_s3('file_name.csv', bucket_name, 'file_name.csv')并监听页面的滚动事件，并使用JavaScript更改 position 和 top的值属性取决于视口的当前位置。使用的代码如下：

position: fixed

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= menuPosition.top && !isAdded) {
    menu.classList.add('sticky');
    menu.parentNode.insertBefore(placeholder, menu);
    isAdded = true;
  } else if (window.pageYOffset < menuPosition.top && isAdded) {
    menu.classList.remove('sticky');
    menu.parentNode.removeChild(placeholder);
    isAdded = false;
  }
});

.header {
  height: 50px;
  background-color: #ddcbaf;
  text-align: center;
  padding-top: 20px;
}

.menu {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #BFFFF3;
  text-align: center;
}

.sticky {
  top: 0;
  position: fixed;
}

.container {
  padding: 0 20px;
  color: #989898;
}

我发现与您情况最接近的方法是this answer中的solutin，您也可以参考它。

Internet Explorer 11中的粘滞表标题不起作用

1 个答案: