Question

在本网站上：编辑

我希望$("#menu")一旦滚过页面就会贴在页面顶部，有点像这里的标题：http://starwars.ea.com/starwars/battlefront

问题是，当我这样做时，页面会跳起来。我以为我可以用$("#placeHolder")解决这个问题，但这也不行。

我怎样才能在Battlefront网站上这样做？

我的jquery（带有去抖功能）在

之下

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

$(window).scroll(function() {
var myEfficientFn = debounce(function() {
if($(window).scrollTop() > $("#menu").height())
{
$("#menu").addClass("fixed");
}
else 
{
$("#menu").removeClass("fixed");
}   
}, 250);
myEfficientFn();
});

谢谢！

Answer 1

首先，添加具有position: fixed;属性的类不会覆盖您的标识position: relative;的{{1}}，因为浏览器首选ID属性。您可以在jQuery中声明#menu。

然后：

首先必须抓住初始（在开始滚动之前）position: relative而不是$("#menu").offset().top并将其存储在变量中。

然后条件应该是：

$("#menu").height()

请参阅小提琴：http://jsfiddle.net/9jc2by8w/

-

虽然当我看到你的网站时，我肯定认为你并不真的需要jQuery，只需按照这种方式设置你的#menu：

$("#menu").css("position","relative");

menuOffset = $("#menu").offset().top

$(window).scroll(function() {
    if( $(document).scrollTop() > menuOffset ) {
        $("#menu").css("position","fixed");
    }
    else {
        $("#menu").css("position","relative");
    }
});

http://jsfiddle.net/qznstyfc/

Prolétairesdetous les pays，unissez-vous！

Answer 2

使#menu的宽度为100％。

此外，将#menu的原始偏移量（页面加载时）存储在变量中，并测试窗口是否在应用fixed类时滚过了该值：

var fromTop = document.getElementById('menu').getBoundingClientRect().top;
$(window).scroll(function(){
    if($(window).scrollTop() > fromTop)
        $("#menu").addClass("fixed");
    else 
        $("#menu").removeClass("fixed");       
})

根据需要添加去抖动。

我刚从某人的CSS相关问题中使用此功能，并将其代码添加到其中以获取一个有效的示例：http://jsfiddle.net/fzhg4cof/2/

将元素设置为位置：在丑陋页面跳转中修复结果

2 个答案: