JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="container-block">
<div class="block">
<p>Text 1</p>
</div>
<div class="block">
<p>Text 2</p>
</div>
<div class="block">
<p>Text 3</p>
</div>
<div class="block">
<p>Text 4</p>
</div>
<div class="block">
<p>Text 5</p>
</div>
<div class="block">
<p>Text 6</p>
</div>
<div class="block">
<p>Text 7</p>
</div>
<div class="block">
<p>Text 8</p>
</div>
<div class="block">
<p>Text 9</p>
</div>
<div class="block">
<p>Text 10</p>
</div>
<div class="block">
<p>Text 11</p>
</div>
<div class="block">
<p>Text 12</p>
</div>
<div class="block">
<p>Text 13</p>
</div>
<div class="block">
<p>Text 14</p>
</div>
<div class="block">
<p>Text 15</p>
</div>
<div class="block">
<p>Text 16</p>
</div>
<div class="block">
<p>Text 17</p>
</div>
<div class="block">
<p>Text 18</p>
</div>
<div class="block">
<p>Text 19</p>
</div>
<div class="block">
<p>Text 20</p>
</div>
<div class="block">
<p>Text 21</p>
</div>
<div class="block">
<p>Text 22</p>
</div>
<div class="block">
<p>Text 23</p>
</div>
<div class="block">
<p>Text 24</p>
</div>
<div class="block">
<p>Text 25</p>
</div>
<div class="block">
<p>Text 26</p>
</div>
<div class="block">
<p>Text 27</p>
</div>
<div class="block">
<p>Text 28</p>
</div>
<div class="block">
<p>Text 29</p>
</div>
<div class="block">
<p>Text 30</p>
</div>
<div class="block">
<p>Text 31</p>
</div>
<div class="block">
<p>Text 32</p>
</div>
<div class="block">
<p>Text 33</p>
</div>
<div class="block">
<p>Text 34</p>
</div>
<div class="block">
<p>Text 35</p>
</div>
<div class="block">
<p>Text 36</p>
</div>
<div class="block">
<p>Text 37</p>
</div>
<div...
CSS
.slogan-logo.fixed-on {
position: fixed;
top:300px;
}
.slogan-logo.fixed-off {
position: relative;
top:0px;
}
.slogan-logo {
background:#cccccc;
}
JavaScript
$(window).scroll(function(){
if ($(window).scrollTop() >1500) {
$('.slogan-logo').removeClass('fixed-on');
$('.slogan-logo').addClass('fixed-off');
}
else {
$('.slogan-logo').removeClass('fixed-off');
$('.slogan-logo').addClass('fixed-on');
}
});