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")之间不断闪烁，导致＆＃34;跳跃＆＃34;的感觉。

当您将标题粘贴到顶部时，您需要添加与标题高度相同的占位符。有了你给我的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/

短页面会导致页面跳转

1 个答案: