Question

我有一个标题position:absolute加载我需要显示它修复特定的滚动所以它工作..

但问题是我如何使用position:fixed属性使用标题效果（即从上向延迟显示）。

代码：

CSS

.iaw-header {
    position:absoulte
}

JS：

{
    if (jQuery(window).scrollTop() >= 700) {
       jQuery('.iaw-header').css('position','fixed');
    });   
}

Answer 1

HTML

<div id="header">
    Header text here.
</div>

CSS

.header { position: absolute; }

JS

if (jQuery(window).scrollTop() >= 700) {
    $('#header').css('top', '-300px'); 
    $('#header').css('position', 'fixed'); 
    $('#header').animate({top: 0}, 1000);
} else {
    $('#header').animate({top: '-300px'}, 1000, function () {
        $('#header').css('top', 0); 
        $('#header').css('position', 'absolute'); 
    });
}

因此，当网站加载（在CSS中）时，标题可以有top: -300px;，当用户滚动时，您将标题的顶部转换（或设置）为0px，因此它会向下滚动顶部。

Answer 2

   $(window).scroll(function () {
    var i = $('.iaw-header')
    var h = i.outerHeight(true);
    if ($(window).scrollTop() > h) {
        if (!i.hasClass('fixed')) i.hide().addClass('fixed');
    }
    if ($(window).scrollTop() >= 400) {
        i.slideDown('fast');
    } else {
        i.removeClass('fixed').show();
    }
});

在你的风格中添加一个类：

.fixed {position: fixed;top:0; left:0;width: 100%; }

也许，不是最好的代码，但你仍然可以开始构建并修改以使其更好。这是Jsfiddle链接：http://jsfiddle.net/lotusgodkk/gxRC9/200/

使用position属性添加滚动标题效果/转换

2 个答案: