Question

我不确定它是否被称为粘性标题，但这对你们来说可能是一个简单的问题！我确实有一个粘性标题.. JSFIDDLE这里

JS CODE：

jQuery(function($) {
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) {
    $("#header").css({position: 'fixed'});
}
else {
    $("#header").css({position: 'inherit'});
}
})
});

CSS：

#header { background: #000; color: #fff; padding: 20px; margin: 0; }
#test { height: 2000px; }

主要问题：我希望此脚本仅在上面的屏幕780上运行。我不想在我的平板电脑和移动版本中使用它..帮助

可选：您可以通过jsfiddle建议/即兴创作我的代码吗？像添加一个很酷的效果，转换等等。

提前致谢！

编辑** 我不确定这是否是一个不同的问题..

我已更新我的代码并替换了

if ($(this).scrollTop() > 100) {

进入

if ($(this).scrollTop() > 100 && $(this).width() > 780) {

在某种程度上，它工作..但它不会返回较小版本的CSS的属性.. 为了解释清楚，这是UPDATED jsfiddle。

对于780以上，当您向下滚动时，标题变为红色，当您向上滚动时，它会再次变为黑色（就像我想要的那样）
如果您将窗口重新调整到780以下，则标题应为灰色。并且如果再次向下滚动。（位置应该是继承而不是固定的）。 颜色仍然应该是灰色的

我的jsfiddle案例，它变成黑色..

Answer 1

您可以使用jquery

获取窗口的高度

if($(window).width() >= 780){
  alert("bigger")
}

Answer 2

我只想添加一个CSS类，并在该类上使用媒体查询来确定是否应该修复它。请参阅Fiddle。

jQuery(function($) {
    $(window).on("scroll", function () {
        if ($(this).scrollTop() > 100) {
            $("#header").addClass("stickyHeader");
        }
        else {
            $("#header").removeClass("stickyHeader");
        }
    })
});

CSS：

@media (min-width: 780px) {
    .stickyHeader { position: fixed; }
}

Answer 3

CSS媒体查询对您没有帮助吗？您可以执行以下操作：

#header { 
    position: fixed;
    background: #000; 
    color: #fff; 
    padding: 20px; 
    margin: 0;
    transition: left 0.5s;
}

#test { 
    height: 2000px; 
}

@media all and (max-width: 780px){
    #header {
        position:inherit;
    }
}

你可以在gist HERE

上看到它

仅限桌面宽度的粘性标题

3 个答案: