Jquery Sticky element on top

<style type="text/css">
        @import url('../../site.css');

        .ifScroll{
            position: fixed;
            top: 0;
            z-index: 1;
            border: 1px solid #f4f4f4;
            background-color: white;
            border-bottom-right-radius: 3px;
            font-size: xx-large;
            width: auto;
        }
    </style>




<div class="breadCrumbs01 text-right breadcrumb text-muted" >
                        <p class="pull-left">
                            <b>Active SY:</b> <i style="color: green"><?= !empty($_SESSION['admin_session_obj']['syinfo']['sy_name'])  ? $_SESSION['admin_session_obj']['syinfo']['sy_name'] : "NOT YET SET"?></i> <b>||</b> <b>Active College Semester:</b> <i style="color: green"><?= !empty($_SESSION['admin_session_obj']['semesterinfo']['cs_description']) ? $_SESSION['admin_session_obj']['semesterinfo']['cs_description'] : "Not Yet Set"?></i>
                        </p>
                        <i class="fa fa-dashboard"></i> <?= $breadCrumbs; ?>
                    </div>





<script type="text/javascript">
    $(function(){
        $("div").scroll(function(){
            console.log('asdasdasd');
            $('.breadCrumbs01').attr('class','ifScroll');
            console.log($(this).scrollTop())
            if($(this).scrollTop() < 20){
                $('.ifScroll').attr('class','breadCrumbs01 text-right breadcrumb text-muted');
                console.log('wee');
            }


        });
    });

</script>