Question

我找到了解决方案，然后跟着它们，但是直到我在jsfiddle中尝试了它，才开始工作。不知何故，它在jsfiddle工作，但不在我的项目中。对我来说，当我向下滚动窗户的高度时，主要消失了。这是js即时通讯使用。其余的代码都在jsfiddle中。我错过了什么？

$(function(){
    $(window).load(function(){ // On load
        $('main').css({'height':($(window).height())});
        $('main').css({'margin-top':($(window).height())});
    });
    $(window).resize(function(){ // On resize
        $('main').css({'height':($(window).height())});
    });
});


$(document).ready(function() {
    var s = $("main");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos > $(window).height()) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

编辑：显然，在CSS中添加！important对.stick很有用。为什么我不会在jsfiddle中需要它？

Answer 1

这是因为您在页面加载时为“main”div指定了一个样式属性。样式属性的特异性高于css中设置的选择器属性。

因此，当您添加类“stick”时，“margin-top”属性不会被覆盖，因为它已由style属性指定，该属性更具体。

对'margin-top'属性添加！important会强制它最相关。

到达窗口顶部时固定div

1 个答案: