短页时Stick header导致页面跳转

Question

当页面不是很长时，我的粘性标题会导致页面跳转。在具有大量滚动的页面上，它完全可以正常工作，但是当它只是少量滚动时，它会将其跳回到粘点。我认为它被困在它所粘的点和过渡部分之间。

#header{
    width: 100%; 
    height:100%;
}

.headertwo{
    width: 100%; 
    height: 48px !important;
    background: url(../images/work/topsky.jpg) no-repeat;
    background-size: 100%;
}

#header_stick{
    width: 100%;
    height: 80px;
    margin-top: 16px;
    font-size: 16px;
    background-color: white;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

#header_stick img{
    margin-top: 1px;
    width: 120px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

.stick {
    position:fixed;
    top:0;
    height: 51px;
    margin-top: 0px;
    font-size: 14px;
    background-color: white;
    opacity:0.9;
    z-index: 14;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

.stick img {

    width: 100px;
    margin-top: 1px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}


$(function() {
 jQuery(window).scroll(function(){
    var top = jQuery(window).scrollTop();
if(top>42) // height of float header
jQuery('#header_stick').addClass('stick');
else
 jQuery('#header_stick').removeClass('stick');
    })

});


<div id="headertwo">
    <div id="intro">
    </div>
</div>

<div id="header_stick">

    <div class="nav-container">

        <div class="nav-logo feature">

            <a href="index.html#anchor" class="transition">
            </a>
            <div class="nav-logo-img"><img src="images/logo.png">
            </div>
            <div class="nav-logo-text">
            </div>
        </div>

        <div class="nav-menu">
            <div class="nav-link contact"><a href="contact.html" class="transition">Contact</a>
            </div>
            <div class="nav-link about"><a href="about.html" class="active transition">About</a>
            </div>
            <div class="nav-link work"><a href="index.html#anchor" class="transition">Work</a>
            </div>
            <button id="trigger-overlay" type="button">Menu</button>
        </div>
    </div>
</div>
    <div class="overlay overlay-hugeinc">
        <button type="button" class="overlay-close">Close</button>
        <nav>
            <ul>
                <li><a href="index.html#anchor">Work</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>


<div class="width-container">
    <div class="line">
    </div>

    <div class="project contact-padding">
        <div class="column-one">
            <div class="header-container">
                <div class="header">About
                </div>
                <div class="subtitle">Subtitle
                </div>
            </div>

        </div>
        <div class="column-two">

                <div class="about-body-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla sapien, eget feugiat justo. Aenean gravida libero ac dolor sagittis, in eleifend tortor lacinia. Quisque at lectus in ex imperdiet convallis. Morbi leo nisi, suscipit eu semper non, mattixs non velit. Duis commodo sem nibh, vitae pharetra purus feugiat sit amet. Etiam suscipit commodo nibh. Suspendisse nisi augue, iaculis rutrum ultricies nec, volutpat quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam imperdiet non diam sit amet suscipit.
                </div>

        </div>

    </div>



</div>

<div id="footer">
    <div class="footer-half footer-half-first">
    </div>
    <div class="footer-half footer-half-second">
        <div class="footer-contents">
        </div>
    </div>
</div>

Answer 1

我认为您提供的 CSS 可能缺少某些内容，但我想我理解发生了什么。当您滚动页面时通过了标题的高度，您将其设置为position:fixed。通过这样做，您删除了页面的一些高度，这意味着 jQuery(window).scrollTop() 发生了变化（scrollTop 现在低于您的页眉高度 - 42）。

这就是导致它在addClass("stick") 和removeClass("stick") 之间不断闪烁的原因，导致那种“跳跃”的感觉。

当您将页眉粘贴到顶部时，您需要添加一个与页眉高度相同的占位符。使用你给我的 CSS，那个高度是80px。所以我在你的内容顶部添加了填充来补偿。

$(function() {
     jQuery(window).scroll(function(){
         var top = jQuery(window).scrollTop();

         if(top>42) { // height of float header
             jQuery('#header_stick').addClass('stick');
             jQuery('.width-container').css("paddingTop", "80px");
         } else {
             jQuery('#header_stick').removeClass('stick');
             jQuery('.width-container').css("paddingTop", "0px");
         }
    });
});

在此处查看示例：http://jsfiddle.net/hzn6map1/