CSS 고정 - HTML 요소를 제 위치에 유지하는 다른 방법

Question

상단에 머리글이 포함 된 섹션이 있고 그 아래에 데이터가 포함 된 섹션이있는 웹 페이지를 만들고 싶습니다. 그런 다음 표제를 계속 표시하고 데이터를 Excel에서 행을 잠글 수있는 것과 같은 방식으로 스크롤 할 수있게하려고합니다.

<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 }을 설정하면 알고있다. 그러나 이것을하는 다른 방법이 있습니까?

다른 방법을 찾고 싶은 이유는 프레임을 사용하는 기존 앱을 사용하고 있기 때문입니다. (그렇습니다. 모든 이유를 알고 있습니다.하지만 어떤 사람이 상사와 대화를 나눴다면 해결 방법을 설명합니다. 작은 버그에 대한 완전한 다시 쓰기이며 그/그녀는 그것을 위해, 그럼 난 당신과 함께 일하고 싶어!) 그리고 우리는 프레임에 고정 요소가 있지만, 프레임이 0 크기로 설정되어 있으면 (폐쇄) 그런 다음 다시 열면 Mac의 Safari에서 볼 수 없습니다. 요소는 여전히 DOM에 있으며, 툴팁을 볼 수 있고 클릭 이벤트도 볼 수 있어야합니다.

따라서 디스플레이를 시도하는 데 오랜 시간이 걸린 후에 css fixed의 대안을 살펴 보는 것이 좋습니다.

Answer 1

하나의 옵션은 대신 absolute을 사용하는 것입니다.

#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>

Answer 2

이것은 그것이 절대적하게하고 페이지를 스크롤 할 때 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>