CSS固定 - 替代HTML元素的替代方法

我想创建一个网页，其顶部有一个包含标题的部分，然后是包含数据的部分。然后，我希望标题保持可见状态，并且数据能够以与在Excel中锁定行相同的方式进行滚动。CSS固定 - 替代HTML元素的替代方法

<div id="heading">This is my Heading</div> 
<div id="data"> 
    <a>1st line of Data</a> 
    <a>2nd line of Data</a> 
</div>

现在我知道的话，我的CSS我设定#heading { position: fixed; top: 0px; left: 0px }然后我航向留在它和我的数据可以在下方滚动。但是有没有另外一种方法呢？

我想找到一种不同的方式的原因是我有一个使用框架的遗留应用程序（是的，我知道所有原因不是 - 但是如果您有任何与您的老板进行过交谈，对于一个小错误是一个完整的重写，他/她说是的，为了它，然后我想和你一起工作！），并且我们在框架中有Fixed元素，但是如果Frame设置为零大小（关闭）然后再次重新打开，他们只是无法在Mac上的Safari中看到。元素仍然在DOM中，它们应该是可见的，甚至可以看到它们的工具提示，并且它们的点击事件也可以工作。

因此，经过几个小时的努力让他们显示我认为值得看看css fixed的替代方案。

来源

2016-08-25 sbarnby71

一个选项是使用absolute而不是fixed。另一个解决办法是只滚动内部内容：

#data { 
 
    max-height: 150px; 
 
    overflow: auto; 
 
}

<div id="heading">This is my Heading</div> 
 
<div id="data"> 
 
    <a>1st line of Data</a> 
 
    <a>2nd line of Data</a> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in lobortis dolor. Mauris dictum dui non tristique pharetra. Ut efficitur neque vitae consequat ullamcorper. Aenean convallis velit urna, nec convallis lectus interdum sit amet. Nullam 
 
    quis vulputate eros. Aenean tincidunt laoreet urna, vel finibus metus tempor sagittis. Fusce eget faucibus felis. Sed tempus arcu nec egestas feugiat. Pellentesque est nulla, scelerisque nec porta vitae, suscipit at mauris. Sed pulvinar ullamcorper 
 
    nisi, sit amet euismod leo. Etiam facilisis pharetra dui. Nulla a vulputate purus. Phasellus fringilla velit id ex luctus faucibus. Vivamus laoreet, eros sit amet ornare elementum, eros dolor sollicitudin lorem, non vehicula tortor sapien vitae sem. 
 
    Fusce et augue ex. Aliquam aliquet mauris mattis neque ornare interdum. Donec sed consequat massa. Praesent sem diam, placerat eu arcu sed, euismod auctor est. Pellentesque fringilla, lorem ac molestie consequat, libero augue consectetur lacus, sed 
 
    accumsan ex leo et velit. In quis rhoncus est, sit amet dignissim nibh. Aliquam malesuada bibendum erat, vitae rutrum dolor sagittis eu. Cras in iaculis sapien. Ut ultricies non felis eu cursus. Curabitur facilisis lacus sit amet lacus vulputate posuere. 
 
    Mauris id tellus ultricies, maximus justo vitae, ornare sem. 
 
    </p> 
 
</div>

来源

2016-08-25 07:59:40 Justinas

我喜欢这个主意，但我不想强加数据元素上的高度限制，最好是我想要的数据填充页面的剩余部分，然后只填充一次即可滚动。 – sbarnby71

@ sbarnby71使用js计算高度或使用弹性框。 – Justinas

我希望纯CSS解决方案（如果可能），由于必须重新计算高度，如果用户调整文档等。 – sbarnby71

-1

这使得它绝对和滚动页面时改变TOP值。不是最好的解决办法，但工程：

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
     $("#heading").css("top", $(window).scrollTop()); 
 
    }) 
 
})

#heading{ 
 
    background: red; 
 
    z-index: 100; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="heading">This is my Heading</div> 
 
<div id="data"> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
    <p>1st line of Data</p> 
 
    <p>2nd line of Data</p> 
 
</div>

来源

2016-08-25 08:05:48

CSS固定 - 替代HTML元素的替代方法

回答

相关问题