0

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

<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>

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

4

3 回答 3

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 过渡，滚动更加流畅。

于 2013-09-01T10:45:52.003 回答
0

检查此 url 相对侧边栏是否固定，当它到达窗口末尾时 

  $(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" );
        }
    });
});
于 2013-09-01T09:07:41.880 回答
0

这肯定会对你有所帮助。

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

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

于 2013-09-01T09:58:40.757 回答