jquery - 滚动条和导航栏的流畅流动

Question

一旦 nav bar 向下滚动时，我希望 scrollDown 顺畅地跟随 nav bar 。但是，一旦 nav bar 触及它，scrollDown 就会跳转。如何解决这个问题？

我还希望滚动条在触及 ma​​in-footer 时像 navbar 一样消失。

脚本:

$(document).ready(function(){
    //var navpos = $('#navi').offset().top;
    //var sidepos = $('#sidebar').scrollTop;
    //var footer_postion=$('#main-footer').offset().top;

    var navpos = $('#navi').offset().top;
    var sidepos = $('#sidebar').offset().top;
    console.log(sidepos);
    var footer_position=$('#main-footer').offset().top;

    $(window).bind('scroll', function() {

        if ($(window).scrollTop() > navpos && $(window).scrollTop() < footer_position) {
            $('#navi').addClass('fixed');                       
        }                           
        else {
            $('#navi').removeClass('fixed');
            //$('#sidebar').removeClass('fixed');
        }   

        if($(window).scrollTop() > sidepos && $(window).scrollTop() < footer_position){
            $('#sidebar').addClass('sticky');
        }
        else {
            $('#navi').removeClass('sticky');
            //$('#sidebar').removeClass('fixed');
        }   

    });
});

HTML

<header class="title">
    <div class="name">
            <h1>Fly Away</h1>
    </div>
</header>
<div class="nav nav-placeholder"  id="navi">
        <ul>
            <li><a href="#Home">Home</a></li>
            <li> <a href="#Package">Package</a></li>
            <li> <a href="#Charter">Charter</a></li>
            <li> <a href="#Weekend">Weekend Trips</a></li>
            <li> <a href="#Long">Long Weekend</a></li>
            <li> <a href="#Contact">Contact Us</a></li>

        </ul>
</div>

<div class="container">
    <div class="sidebar" id="sidebar">
    <p>Scroll <br/> Down</p>
    </div>
    <div id="image">
        <img src="images/travel.png">
    </div>
</div>

<footer class="sub-footer">
    <div>
        <p class="footie">Travel anywhere you want!</p>
    </div>
</footer>
<footer class="main-footer" id="main-footer">
    <div>
        <p class="copy">Copyright &copy; All Rights Reserved.</p>
    </div>
</footer>

CSS:

*{
    font-family: 'Bree Serif', serif;
}

header{
    background-color: hsl(34, 43%, 69%);
    height: 110px;
}

.name{
    color: rgba(58, 58, 54, 0.52);
    text-align:center;
    height: 90px;
}

h1{
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 20px;

}

div#navi {
    background-color: #d2e0db;
    height: 27px;
    width: 100%;
}

div#image {
    margin-top: -61px;
}

.fixed{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 0px;
    margin-bottom: 0px;
}

li {
    display: inline-block;
    text-decoration: none;
    list-style: none;
    margin-right: 17px;
    margin-top: 2px;
}

li a{
    text-decoration: none;
    color:black;
    font-family: 'Bree Serif', serif;
}

.sidebar{
    width: 57px;
    height: 89px;
    border: 3px solid black;
    background-color: rgba(146, 154, 68, 0.55);
    position: relative;
    z-index: 9999;
    margin-top: 0px;
    top: 132px;
}

.sidebar.sticky{
    position: fixed;
    z-index: 9999;
}

p{
    margin-left: 6px;
    margin-top: 17px;
}

.container {
    background-color: antiquewhite;
    height: 521px;
}

img{
    display: block;
    margin: 0 auto;
    padding-top: 37px; 
}

footer.sub-footer {
    background-color: #d2e0db;
    text-align: center;
    height: 300px;
    margin-top: -17px;
}

p.footie {
    font-size: 35px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 20px;
}

footer.main-footer {
    background-color: hsl(34, 43%, 69%);
        height: 960px;
}

p.copy {
    margin-top: 0px;
    margin-bottom: 0px;
        text-align: center;
    font-size: 42px;
    padding-top: 231px;
}

Answer 1

试试这个

$(document).ready(function(){

  var navi = $("#navi");
  var side = $("#sidebar");
  var navpos = navi.offset().top;
  var footpos = $("#main-footer").offset().top;

  $(document).scroll(function() {
    navi.toggleClass("fixed", $(this).scrollTop() > navpos);
    navi.toggleClass("hide", $(this).scrollTop() > footpos);
    side.toggleClass("sticky", $(this).scrollTop() > 221);
    side.toggleClass("hide", $(this).scrollTop() > footpos);
  });

});

并将其添加到 css

.hide {
    display: none;
}

我认为使用 toggleClass 比添加和删除更容易 :)

JS Fiddle

虽然我不确定没有显示的图片有什么奇怪的，但当它出现时可能会有所不同。