CSS Positioning: Fixed Left or Top when scrolling

debugcn Published at Dev

Alexander

I want to create scollable divs in html and css.

My goal is the following: I have got three divs:

enter image description here

The orange div should stay at the top left.

When scrolling to the left or right (horizontal axis) I want the yellow pane as well as the blue pane to move left or right. The green and orange panes should not move left or right.

When Scrolling up or down (vertical axis) i want the green and blue pane to move up or down.The yellow and orange panes should not move up or down.

All the four divs are located in another div.

<div class="panes">
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

There is the Overflow css command, but I could figure out how to achive this.

Alexander

I have now figured out a solution to this by using jquery:

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
    #content {
        position: fixed;
        height: 417px;
        width: 1000px;
        top: 5px;
        left: 105px;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    #header {
        height: 50px;
        width: 3000px;
        background-color: yellow;
    }

    #appointments-container {
        height: 350px;
        width: 3000px;
        background-color: yellow;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    #appointments {
        height: 700px;
        width: 3000px;
        background-color: lightblue;
    }

    #legend {
        position: fixed;
        top: 55px;
        left: 5px;
        height: 350px;
        width: 100px;
        background-color: lime;
        overflow-y: hidden;
    }

    #topleft {
        position: fixed;
        top: 5px;
        left: 5px;
        height: 50px;
        width: 100px;
        background-color: orange;
    }

    #scroller {
        position: fixed;
        top: 55px;
        left: 1105px;
        height: 350px;
        width: 18px;
        overflow-y: scroll;
    }

    #scroller-content{
        height: 700px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div >
    <div id="topleft"></div>
    <div id="legend">
    <div id="legend-content">
        1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
        11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
        21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />
        32<br />33<br />34<br />35<br />36<br />37<br />38
    </div>
</div>
<div>
<div id="content">
    <div id="header">
        1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 
         - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 -
    </div>
    <div id="appointments-container">
      <div id="appointments">
         1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 
         - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 -  
        <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
        11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
        21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />
        32<br />33<br />34<br />35<br />36<br />37<br />38
      </div>
    </div>
</div>
<div id="scroller">
    <div id="scroller-content">
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#scroller").scroll(function() {
            var height  = $("#scroller").scrollTop();

            $("#appointments-container").scrollTop(height);
            $("#legend").scrollTop(height);
        });
    });
</script>

It is using the scroll event to capture when a pane is scrolled. And it uses scrollTop(height) to programmatically scroll the other panes.

Collected from the Internet

Please contact [email protected] to delete if infringement.