How to make custom sidebar position fixed

debugcn Published at Dev

Raza Poonja

This is My code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width = device-with, initial-scale = 1">
    <title>Tittle</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <style>

                body, html, .sidebar, .body {
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
                }

                #container {
                    width: 100%;
                    height: 100%;
                }

                .sidebar {
                    background-color: green;
                    width: 10%;
                    float: left;
                    height: 100%;
                    //position: fixed;
                }

                .body {
                    float:left;
                    width:90%;
                    height:100%;
                }

        </style>

</head>
    <body>

        <div id="container">
            <div class="sidebar">

            </div>

            <div class="body">

                        <div id="Div">
                            <img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px"/>
                        </div>

            </div>

            </div>
        </div>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

This code works perfectly but I want the sidebar to be fixed at its position when user is scrolling the page here the output