When scrolling down, a white shadow should appear from above, and disappear from below, and vice versa.
I will clarify the question: 1. If we start scrolling down, the class .bottom-scroll appears in the container in which the scrolling occurs. 2. If we start spinning up, the .top-scroll class appears, and the .bottom-scroll class disappears.
(function($) { $(window).load(function() { $(".postcard-container").mCustomScrollbar({ theme: "inset-2-dark", setHeight: "100%" }); }); })(jQuery); a { color: #0262a0 } .wrap { width: 100%; max-width: 705px; min-width: 320px; margin: 0 auto } .top-panel { margin-bottom: 60px; background-color: #e2fffe } .top-panel .wrap { height: 155px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .rating-form { padding-top: 20px } .rating-form:after { display: table; clear: both; content: "" } .rating-form .total-vote { margin-bottom: 20px } .rating { margin-bottom: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .rating:after { display: table; clear: both; content: "" } .rating label, .rating>input:checked ~ label { width: 16px; height: 16px; overflow: hidden; white-space: nowrap; cursor: pointer; text-indent: -9999px } .rating:not(:checked)>label, .rating>input:checked ~ label, .rating:not(:checked)>label:hover, .rating>input:checked+label:hover, .rating>input:checked+label:hover ~ label, .rating>label:hover ~ input:checked ~ label, .rating:not(:checked)>label:hover ~ label { background: url("http://artlenk.ru/project/avd/images/star.png") no-repeat } .rating:not(:checked)>input { position: absolute; top: -9999px; clip: rect(0, 0, 0, 0) } .rating:not(:checked)>label { background-position: 0 -16px } .postcard-area .tab-content { border: 1px solid #cbd1d9; border-top-width: 0 } .postcard-area .tab-content .tab-pane { height: 560px; padding: 40px 10px 40px 0 } .postcard-area .nav-tabs .nav-link { background-color: #00549f; border-radius: 0; color: #fff } .postcard-area .nav-tabs .nav-link.active { background-color: #fff; color: #55595c } .postcard-area .nav-tabs .nav-link:hover { border-color: transparent; background-color: #dddddd; color: #373a3c } .postcard-area .nav-tabs .nav-link:focus { outline: none } .postcard-area .nav-tabs .nav-item+.nav-item { margin-left: 0 } .postcard-area .postcard-container { position: relative } .postcard-area .postcard-container img { max-width: 170px } .postcard-area .postcard-container:before { width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; z-index: 5; content: ''; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0) } .postcard-area .postcard-container ul { margin: 0 0 -30px 35px; padding: 0; list-style: none } .postcard-area .postcard-container ul:after { display: table; clear: both; content: "" } .postcard-area .postcard-container ul li { width: calc(100% / 3 - 15px); margin: 0 0 30px 15px; float: left; position: relative } .postcard-area .postcard-container ul li label { position: relative } .postcard-area .postcard-container ul li label:before { content: ""; width: 12px; height: 12px; background-color: #fff; box-shadow: 0 0 0 4px #fff; border-radius: 50% } .postcard-area .postcard-container ul li label:before, .postcard-area .postcard-container ul li input { position: absolute; top: 20px; left: 20px } .postcard-area .postcard-container ul li input { display: none } .postcard-area .postcard-container ul li input:checked+label:before { background-color: #e1005d } .notification-block { padding: 25px 0 } .notification-block .notification { margin-right: 20px; font-size: 23px; position: relative } .notification-block .notification[data-count]:not([data-count='']):after { background-color: #ff3e2c; border-radius: 10px; box-sizing: border-box; color: #fff; content: attr(data-count); display: inline-block; font-size: 13px; padding: 0 .4em; position: absolute; text-align: center; min-width: 16px; height: 16px; line-height: 15px; top: -8px; right: -10px; box-shadow: 0 0 0 2px #fff } <link href="http://artlenk.ru/project/avd/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://artlenk.ru/project/avd/css/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://artlenk.ru/project/avd/js/bootstrap.min.js"></script> <script src="http://artlenk.ru/project/avd/js/jquery.mCustomScrollbar.concat.min.js"></script> <header class="top-panel"> <div class="wrap"> <form action="#" class="rating-form"> <div class="rating"> <input type="radio" id="star05" name="rating" value="5"> <label for="star05" title="5">5</label> <input type="radio" id="star04" name="rating" value="4"> <label for="star04" title="4">4</label> <input type="radio" id="star03" name="rating" value="3"> <label for="star03" title="3">3</label> <input type="radio" id="star02" name="rating" value="2"> <label for="star02" title="2">2</label> <input type="radio" id="star01" name="rating" value="1"> <label for="star01" title="1">1</label> </div> <div class="total-vote"><span class="count">2</span> голоса</div> </form> </div> </header> <div class="postcard-area wrap"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#postcard" role="tab">Открытки 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#postcard-second" role="tab">Открытки 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#postcard-third" role="tab">Открытки 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="postcard" role="tabpanel"> <div class="postcard-container"> <ul> <li> <input type="radio" name="card" id="card-01"> <label for="card-01"> <img src="http://artlenk.ru/project/avd/images/01.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-02"> <label for="card-02"> <img src="http://artlenk.ru/project/avd/images/02.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-03"> <label for="card-03"> <img src="http://artlenk.ru/project/avd/images/03.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-04"> <label for="card-04"> <img src="http://artlenk.ru/project/avd/images/04.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-05"> <label for="card-05"> <img src="http://artlenk.ru/project/avd/images/05.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-06"> <label for="card-06"> <img src="http://artlenk.ru/project/avd/images/06.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-07"> <label for="card-07"> <img src="http://artlenk.ru/project/avd/images/07.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-08"> <label for="card-08"> <img src="http://artlenk.ru/project/avd/images/08.jpg" alt=""> </label> </li> <li> <input type="radio" name="card" id="card-09"> <label for="card-09"> <img src="http://artlenk.ru/project/avd/images/09.jpg" alt=""> </label> </li> </ul> </div> </div> <div class="tab-pane" id="postcard-second" role="tabpanel">...</div> <div class="tab-pane" id="postcard-third" role="tabpanel">...</div> </div> </div> 