locked
DIV title always visible in large container RRS feed

  • Question

  • User-2080280106 posted

    Hi guys,

    I got a large scrolling area that contains quite wide DIVs with titles. The problem is I would like to see the title all the time I am scrolling the area however as the DIV is wide, sometimes I see the the part of the DIV without the title. Is there any way (sticky or?) to make sure the title is always visible?

    In other words, in the following example I would like to see the word "TEST" all the time a part of the green box is visible

    https://jsfiddle.net/DavidMacek/ocnb5mr4/

    Anybody has an idea?

    Many thanks, David

    Monday, May 24, 2021 12:23 PM

All replies

  • User1535942433 posted

    Hi David Macek,

    I think you could use sticky and don't use overflow.Just like this:

    <div class="main">
      <div class="container">
        <div class="Index-Stay" style="left: 86px; top: 20px; " id="Stay433316">
          <div class="sticky">TEST</div>
        </div>
      </div>
    </div>
    
    .sticky {
      ;
      top:0px;
      left:0px;
    }
    .main {
      width: 400px;
      height: 200px;  
    }
    
    .container {
      height: 342px;
      border: 0px;
      padding: 0px;
      width: 2400px;
      margin: 0px;
      background-color: white;
      ;
    }
    
    .Index-Stay {
      background-color: #1F7F1F;
      width: 1000px;
      height: 40px;
      ;
    
    }
    
    .Index-Stay div {
      text-align: center;
      font-family: Arial, Times, Sans-Serif;
      font-size: 14px;
    }
    

    Best regards,

    Yijing Sun

    Tuesday, May 25, 2021 2:25 AM