jquery 在标题后滚动固定导航栏

jyztefdp 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(101)

我试图修复“导航栏”后，“标题”顺利这是50像素从顶部。
DEMO LINK

JQUREY

$(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 80;
             if ($(window).scrollTop() > navHeight) {
                 $('.navigation').addClass('fixed');
             }
             else {
                 $('.navigation').removeClass('fixed');
             }
        });
    });

jquery

来源：https://stackoverflow.com/questions/77179381/on-scroll-fixed-navbar-after-header

1条答案

按热度按时间

jslywgbw1#

为什么你不改变导航类的风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

</head>
<style>
    body {
        margin: 0;
        padding: 50px 0 0;
    }
    div {
        text-align: center;
    }
    .header {
        background-color: yellow;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .banner {
        background-color: skyblue;
        height: 150px;
    }
    .navigation {
        background-color: gray;
        height: 30px;
        position: fixed;
        top: 50px;
        width: 100%;
        z-index: 1;
    }
    .pagedata {
        height: 500px;
        padding: 50px;
    }

    .fixed {
        position: fixed;
        top: 50px;
        width: 100%;
        z-index: 1;
    }
</style>
<body>
    <div class="container">
        <div class="header"> Header</div>       
        <div class="banner"> Banner </div>
        <div class="navigation"> Navigation </div>
        <div class="pagedata">I am trying to fix "Navbar" just after "Header" smoothly which is 50px from top.</div>
    </div>
</body>
<script>
</script>
</html>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 在标题后滚动固定导航栏

1条答案

相关问题

热门标签

最新问答