Question

这是一个jQuery脚本，用于在用户滚动页面时修复菜单。 This 是一个现场演示。

<script>
var num = 170; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#header').addClass('fixed');
    } else {
        $('#header').removeClass('fixed');
    }
});
</script>

<style>
.fixed {
    position:fixed;
    top:0;
    background-color:#e4e4e4;
    width:100% !important;
    background-image: url("images/logo_small.png") !important;
    background-size:20px auto !important;
    margin:0 auto !important;
    padding:20px 0 10px !important;
    background-position:90px center !important;
    z-index:1;
}


#header {
    background-image: url("images/logo.png");
    background-position: 30px 5px;
    background-repeat: no-repeat;
    background-size: 152px auto;
    font-size: 13px;
    margin: 18px auto 0;
    padding: 60px 0 87px 100px;
    width: 780px;
}
</style>

问题是，正如您所看到的，当“小”菜单出现时会出现“跳跃”，内容会突然上升。

Answer 1

http://jsfiddle.net/andaywells/jVy5L/64/embedded/result/

var num = 170; //number of pixels before modifying styles

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {

    $('#header').addClass('fixed');


} else {
    $('#header').removeClass('fixed');

}
});

我删除了淡出，添加了位置：固定;到标题，所以使用css过渡，滚动更流畅。

Answer 2

检查此网址 relative sidebar to fixed, when it reaches the end of window

  $(function() {      
    $(window).scroll(function(evt) {
        var top = $('#header').offset().top;
        var sidebartop = $('#header').height() / 2;
        var y = $(this).scrollTop() - sidebartop;
        if (y > top) {
                $('#header').addClass('fixed').css( "top",  -top -sidebartop + 220)
            }
        else {
            $('#header').removeClass('fixed');
            $('#header').css( "top", "auto" );
        }
    });
});

Answer 3

这肯定会对你有所帮助。

示例：http://www.inserthtml.com/2013/07/scroll-header-animations/

演示：http://www.inserthtml.com/demo/header-animations/example-1/

.bind（'scroll'），添加动画或减少“反弹”

3 个答案: