xxxxxxxxxx1
<body data-mdb-spy="scroll" data-mdb-target="#myScrollspy" data-mdb-offset="50" style="margin-top: 0px;">2
<header>3
<!-- Animated navbar-->4
<nav class="dy-page-header-theme navbar navbar-expand-lg fixed-top navbar-scroll">5
<div class="container-fluid">6
<div class="collapse navbar-collapse" id="navbarExample01">7
<ul class="navbar-nav me-auto mb-2 mb-lg-0">8
<li class="nav-item active">9
<a class="nav-link fw-bold fs-4" aria-current="page" href="#intro">DY-WIot</a>10
</li>11
<li class="nav-item">12
<a class="nav-link" href="" rel="nofollow" target="_blank"></a>13
</li>14
<li class="nav-item">15
<a class="nav-link" href="" target="_blank"></a>16
</li>17
</ul>18
<ul class="navbar-nav flex-row">19
<!-- Icons -->20
<li class="nav-item">21
<a class="nav-link pe-2" href="" rel="nofollow" target="_blank">22
<i class="fab fa-accusoft"></i>23
</a>24
</li>25
<li class="nav-item">26
<a class="nav-link px-2" href="" rel="nofollow" target="_blank">27
<i class="fab fa-facebook-f"></i>28
</a>29
</li>30
<li class="nav-item">31
<a class="nav-link px-2" href="" rel="nofollow" target="_blank">32
<i class="fab fa-twitter"></i>33
</a>34
</li>35
<li class="nav-item">36
<a class="nav-link ps-2" href="" rel="nofollow" target="_blank">37
<i class="fab fa-github"></i>38
</a>39
</li>40
</ul>41
</div>42
</div>43
</nav>44
<!-- Animated navbar -->45
<div id="" class="bg-image text-center" style="46
background-image: url(https://pic3.zhimg.com/v2-0831ab242b01a6de64757dfd7b0197d1_1440w.jpg?source=172ae18b);47
height: 500px;">48
<div class="mask text-white" style=" background-color: rgba(0, 0, 0, 0.80);">49
<div class="container h-100 d-flex justify-content-center align-items-lg-center">50
<div class="row pt-5 mt-3 intro-info-content text-center">51
<h1 class="display-4 mb-5 mt-3">52
Sticky Question!53
</h1>54
<h3>Use MDB Pro 5 Standard</h3>55
<h5>1. Why the green DIV shrinked after redisplay the background image?</h5>56
<h5>2. data-mdb-sticky-animation-sticky="slide-in-down" <br/>57
data-mdb-sticky-animation-unsticky="slide-up"<br/>58
Are these two property invalid for DIV？</h5>59
</div>60
</div>61
</div>62
</div>63
<!-- Background image -->64
</header>65
<div class="container-fluid mt-5 mb-5">66
<!-- data-mdb-sticky-animation-sticky="slide-in-down"67
data-mdb-sticky-animation-unsticky="slide-up" -->68
69
<div class="row">70
<div class="col-lg-2 container bg-dark" id="abc"71
style=" margin-top: 20px;">72
<div class="sticky mt-3" 73
data-mdb-sticky-direction="both" 74
data-mdb-sticky-offset="60"75
data-mdb-sticky-delay="60" 76
data-mdb-sticky-boundary="true"77
style="background-color:green; height: 300px;color: whitesmoke;">78
<h3>This is Side Navbar!</h3>79
</div>80
</div>81
<div class="col-lg-9 mx-auto mt-4 bg-info" style="height: 1500px; background-color: whitesmoke;">82
</div>83
</div>84
</div>85
<footer id="footer-stop" class="dy-page-footer bg-dark">86
<div class="container justify-content-center text-center" style="height: 80px;color: white;">87
<div class="row">88
<h1>footer!!</h1>89
</div>90
</div>91
</footer>92
</body>xxxxxxxxxx1
body {2
position: relative;3
overflow: auto;4
margin-top: 78px;5
/* background-color: red; */6
}7
8
.navbar.navbar-scroll.navbar-scrolled {9
padding-top: 5px;10
padding-bottom: 5px;11
background: rgba(255, 255, 255, 0.95);12
}13
14
.dy-page-header-theme {15
/* overflow: hidden; */16
background: rgb(24, 5, 230, 0.3);17
height: auto;18
19
}1
1
Console errors: 0