abhishek-9ithub/alphbeticalIndexing.html

## alphbeticalIndexing.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Alphabetical Indexing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <style>
        .fixed_name {
            position: fixed;
            width: 100%;
            height: 40px;
            background: #ccc;
            text-align: center;
        }

        .alp {
            display: none;
            color: #000;
        }

        .alp.active {
            display: block;
        }

        .modal-bd-height {
            margin: 0 0 0 0;
            padding: 40px 0 0 0;
            height: 400px;
            overflow-y: scroll;
        }

        .modal-bd-height div {
            width: 100%;
            background: #000;
            color: #fff;
            margin: 0 0 384px 0;
        }
    </style>

    <div class="fixed_name">
        <div class="alp active" data-in="block_A">A</div>
        <div class="alp" data-in="block_B">B</div>
        <div class="alp" data-in="block_C">C</div>
        <div class="alp" data-in="block_D">D</div>

    </div>

    <div class="modal-bd-height">
        <div id="block_A">A</div>
        <div id="block_B">B</div>
        <div id="block_C">C</div>
        <div id="block_D">D</div>
    </div>

</body>

<script>
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 1) {
            $('header').addClass('inSticky slideInDown');
        } else {
            $('header').removeClass('inSticky slideInDown');
        }

    });

    $('document').ready(function() {
        $('.modal-bd-height').on("scroll", onScroll);

        function onScroll(event) {
            var scrollPos = $('.modal-bd-height').scrollTop();
            $('.alp').each(function() {
                var getE = $(this)
                var getAtt = $(this).attr('data-in');
                var pos = $('#' + getAtt).position().top;
                if (pos <= 100) {
                    $('.alp').removeClass('active');
                    $(this).addClass('active');
                } else {
                    $(getE).removeClass('active');
                }

            });
        }

    });
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Alphabetical Indexing</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</head>
	<body>
	<style>
	.fixed_name {
	position: fixed;
	width: 100%;
	height: 40px;
	background: #ccc;
	text-align: center;
	}

	.alp {
	display: none;
	color: #000;
	}

	.alp.active {
	display: block;
	}

	.modal-bd-height {
	margin: 0 0 0 0;
	padding: 40px 0 0 0;
	height: 400px;
	overflow-y: scroll;
	}

	.modal-bd-height div {
	width: 100%;
	background: #000;
	color: #fff;
	margin: 0 0 384px 0;
	}
	</style>

	<div class="fixed_name">
	<div class="alp active" data-in="block_A">A</div>
	<div class="alp" data-in="block_B">B</div>
	<div class="alp" data-in="block_C">C</div>
	<div class="alp" data-in="block_D">D</div>

	</div>

	<div class="modal-bd-height">
	<div id="block_A">A</div>
	<div id="block_B">B</div>
	<div id="block_C">C</div>
	<div id="block_D">D</div>
	</div>

	</body>

	<script>
	$(window).on('scroll', function() {
	if ($(this).scrollTop() > 1) {
	$('header').addClass('inSticky slideInDown');
	} else {
	$('header').removeClass('inSticky slideInDown');
	}

	});

	$('document').ready(function() {
	$('.modal-bd-height').on("scroll", onScroll);

	function onScroll(event) {
	var scrollPos = $('.modal-bd-height').scrollTop();
	$('.alp').each(function() {
	var getE = $(this)
	var getAtt = $(this).attr('data-in');
	var pos = $('#' + getAtt).position().top;
	if (pos <= 100) {
	$('.alp').removeClass('active');
	$(this).addClass('active');
	} else {
	$(getE).removeClass('active');
	}

	});
	}

	});
	</script>

	</html>