CSS: Stick element to top, right, bottom or left of browser window when scroll page 

<!DOCTYPE html>
<html>
<head>
    <title>Stick element to top, right, bottom or left of browser window when scroll page</title>
    <style type="text/css">
        body{
            /* to make page scrollable */
            min-height: 2000px;
        }

        .stick{
            position: fixed;
            border: 1px dashed red;
            width: 100px;
            height: 100px;
        }

        .top{
            top: 0;
        }

        .right{
            right: 0;
        }

        .bottom{
            bottom: 0;
        }

        .left{
            left: 0;
        }
    </style>
</head>
<body>
    <div class="stick top left">
        <span>top left</span>
    </div>

    <div class="stick top right">
        <span>top right</span>
    </div>

    <div class="stick bottom left">
        <span>bottom left</span>
    </div>

    <div class="stick bottom right">
        <span>bottom right</span>
    </div>
</body>
</html>