調整頁面大小時浮動導航欄不起作用

Question

最后，我為我的主頁編寫了一個浮動導航欄。 雖然它在大多數情況下都有效，但在浮動模式下，當我拖動更改 window 大小時，它會被處理。 見下圖。

任何人都可以建議更改代碼來解決此問題嗎？ 非常感謝。

Javascript 代碼：

<script type='text/javascript' async>
$(function() {
    // Stick nav to the top of the window
    var nav = $('#float');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
}); 
</script>

導航欄代碼：

<div id="floatwrap">
  <div id="float">
    <hr style="background:#999;" />
    <h4 style="text-align:center;"><a href="#news">What's New</a> | <a href="#bio">Short Bio</a> | <a href="#edu">Education</a> | <a href="#pub">Publications</a> | <a href="#ptt">Patents</a> | <a href="#tnt">Talks & Tutorials</a> | <a href="#hna">Honors & Awards</a> | <a href="#sol">Some Links</a></h4>
    <hr style="background:#999;" />
  </div>
</div>

相關 CSS：

#floatwrap {
    height: 7.625rem;
}
#float {
    background: #fff;
    min-width:800px;
    max-width:1024px;
    margin-left: auto;
    margin-right: auto;
}
hr { 
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 

Answer 1

當您調整 window 的大小和滾動時，您需要更新導航的 CSS。

// Stick nav to the top of the window
var nav = $("#float");
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);

const update = () => {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css({
            position: "fixed",
            top: 0,
            left: nav.offset().left,
            width: nav.width(),
            background: "red"
        });
        isFixed = true;
    } else if (!shouldBeFixed && isFixed) {
        nav.css({
            position: "static",
            background: ""
        });
        isFixed = false;
    }
};

$w.on("scroll resize load", () => update());

 // Stick nav to the top of the window var nav = $("#float"); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); const update = () => { var scrollTop = $w.scrollTop(); var shouldBeFixed = scrollTop > navHomeY; if (shouldBeFixed &&.isFixed) { nav:css({ position, "fixed": top, 0: left. nav.offset(),left: width. nav;width() }); isFixed = true. } else if (:shouldBeFixed && isFixed) { nav;css({ position; "static" }); isFixed = false. } }, $w;on("scroll resize load", () => update());

 body { margin: 0; padding: 0; } hr { margin: 0; } #floatwrap { height: 7.625rem; } #float { background: #fff; min-width: 800px; max-width: 1024px; margin-left: auto; margin-right: auto; } p { max-width: 300px; margin: 0 auto 40px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> Letius auctor tempor nam fusce consectetuer eu lobortis diam. Eleifend potenti massa neque risus gravida velit. Nunc elit non torquent cubilia nisl natoque pulvinar luctus. Rutrum sollicitudin magna morbi pharetra cursus. </p> <div id="floatwrap"> <div id="float"> <hr style=" background:#999;"> <h4 style="text-align:center;"><a href="#news">What's New</a> | <a href="#bio">Short Bio</a> | <a href="#edu">Education</a> | <a href="#pub">Publications</a> | <a href="#ptt">Patents</a> | <a href="#tnt">Talks &amp; Tutorials</a> | <a href="#hna">Honors &amp; Awards</a> | <a href="#sol">Some Links</a> </h4> <hr style="background:#999;"> </div> </div> <p> Letius auctor tempor nam fusce consectetuer eu lobortis diam. Eleifend potenti massa neque risus gravida velit. Nunc elit non torquent cubilia nisl natoque pulvinar luctus. Rutrum sollicitudin magna morbi pharetra cursus. Efficitur leo ultricies viverra consectetur maximus ligula ultrices eu luctus. Lacus pretium magnis egestas quis consectetuer suspendisse vulputate hac commodo sed. Ullamcorper tempus sapien himenaeos arcu hendrerit malesuada fames mi. Taciti erat quis fermentum semper facilisis suspendisse nulla tellus eu elementum. Vestibulum adipiscing tempus habitant leo augue morbi. Neque dignissim accumsan semper velit viverra duis congue arcu. Maximus class primis nulla parturient ex conubia tempus. Non erat semper mauris ad penatibus leo. Vitae duis dictum malesuada viverra felis etiam at ullamcorper congue imperdiet. Dignissim nisi ullamcorper est ante parturient facilisis dis leo congue. Ornare id tristique sociosqu cubilia justo vestibulum eu suscipit. Maecenas neque dapibus euismod turpis interdum habitasse proin eros. Eleifend porttitor neque urna etiam elit feugiat fusce dolor dui. Facilisi porttitor auctor ipsum dui lacus sapien justo efficitur netus nisi. Odio porta dignissim risus dolor nullam leo senectus tincidunt. Fringilla morbi proin massa ultricies eros hendrerit finibus tempus. Sit sem eros nostra ut magna finibus mi urna dis curabitur morbi. Dis lacinia litora magna vulputate viverra. Quisque quis class tempor augue maecenas iaculis lacus aliquam ex. Vehicula condimentum penatibus scelerisque magna posuere fames enim. Consectetur pulvinar nec libero nascetur per risus dictum metus rhoncus. Dis quam senectus lobortis morbi arcu cubilia mus risus non iaculis pretium. Libero fames id cubilia proin etiam magna. Convallis iaculis placerat mus gravida consectetuer non nisi lobortis. Magna vulputate morbi pharetra mi lobortis consectetuer pellentesque vivamus dictum sagittis. Semper sollicitudin ultricies vestibulum libero volutpat tempus leo justo dignissim turpis litora. Purus mauris senectus lacinia magnis lacus ullamcorper nisi condimentum. Adipiscing sodales conubia hendrerit ac ligula pretium eu. Aliquam lacinia senectus nisl sit ac. Nec suscipit ipsum dolor phasellus tristique vivamus proin ligula venenatis ut. Tristique himenaeos ipsum sollicitudin semper mattis habitasse et nunc dictumst fringilla. Egestas scelerisque dapibus sagittis maecenas dictum lectus consequat semper facilisi nullam. Ante vel commodo vestibulum hac fermentum urna a. Orci magna nascetur imperdiet duis blandit consectetuer ultricies ex. Lectus lacinia donec ante neque mi arcu aenean torquent efficitur. Curabitur nunc augue natoque porta luctus volutpat torquent. Ipsum ullamcorper leo faucibus massa congue tortor. Semper aliquet cras vestibulum venenatis blandit consectetuer sit quisque. Lacinia ridiculus sed nisl parturient vivamus amet pellentesque aliquet. Neque praesent accumsan posuere mattis egestas blandit nec. Inceptos parturient pulvinar amet molestie phasellus fames odio class. Nostra curae ex erat netus arcu lacinia. Adipiscing malesuada cras nisi ac mus. Nulla neque dapibus ex ligula turpis. Natoque sed ut erat hendrerit mus ullamcorper maecenas. Nibh justo vehicula porta nostra proin. Aliquet fusce torquent lobortis sollicitudin lectus himenaeos quis urna. Scelerisque aptent nam ridiculus ligula adipiscing in nibh pharetra rutrum. </p>