往下滑會出現，往上滑會消失的廣告

也可以應用在 navbar

定位

position: fixed;
top: 0;

互動

scroll 事件
click 事件
display: none; // flex;


<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Header Show | Test</title>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- Noto Sans -->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Noto+Sans+KR|Noto+Sans+SC|Noto+Sans+TC" rel="stylesheet">

    <style type="text/css">
        .jt-ad {
            background-color: #333;
            color: white;
            decoration: none;
            padding: 15px 40px;
            height: 48px;
            position: fixed;
            top: 0;
            width: 100%;
            box-sizing: border-box;
            transition: top 0.4s ease-in-out;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
            z-index: 99;            
            display: none;
        }

        .jt-ad a {
            color: white;
            text-decoration: none;
        }
        .jt-popUp .jt-ad {
            display: flex;
            justify-content: center;
            align-item: center;
        }

        .jt-hideUp .jt-ad {
            z-index: 99;            
            display: none;
        }       

        .jt-click {
            position: fixed; 
            right: 10px; 
            top: 48px;
            height: 30px; 
            width: 30px; 
            background: #333; 
            text-align: center;
        }

        .cc {
            margin-top:1000px; 
            height:200px; 
            padding-bottom:1000px;
        }

        body {
            padding: 0;
            margin: 0;
            background: #149;
            color: #888;
        }
    </style>
</head>
<body style="font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', sans-serif;">
    <div class="jt-ad" style="align: center">
        <a href="https://www.bnext.com.tw/">4大應用實務，深度社群經營</a>
        <div id="jt-click" class ="jt-click">X</div>
    </div>
    <main>
        <div class ="cc"></div>
        <div id="target" class ="cc" ></div>
    </main>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#jt-click').click(function() {
                $(".jt-ad").hide();
            });
        });

        var bodyClass = document.body.classList,
            lastScrollY = 0;
        window.addEventListener('scroll', function(){
            var st = this.scrollY;

            if( st < lastScrollY) {
                bodyClass.remove('jt-popUp');
            } else {
                bodyClass.add('jt-popUp');
            }

            lastScrollY = st;
        });
    </script>

</body>
</html>

範例改釘在下方的廣告，一樣是做往下滑出現，往上滑消失。
把 .ad 和 .click 的 top 改 bottom 即可。