仅适用于桌面宽度的粘性标题答案

【问题标题】：Sticky Header for Desktop Width Only仅适用于桌面宽度的粘性标题
【发布时间】：2013-11-14 12:13:17
【问题描述】：

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

JS代码：

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 案例，它变黑了..

【问题讨论】：

看看 $(window).width();并将其合并到您的代码中。试一试，如果您仍然卡住，请返回您的代码 :)
大家好，请再次提问..我已经更新了。

标签： javascript jquery css media-queries

【解决方案1】：

我会添加一个 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; }
}

【讨论】：

哇，这是另一种方法:) 但它产生了额外的问题.. 请再次查看我的问题。
还有什么问题？您可以将规则添加到 stickyHeader 类。见jsfiddle.net/9Lw2G/4
好吧，它不起作用，因为小提琴框小于 780px，所以标题不固定。要将其作为粘性开关进行测试，请将媒体查询设置为 280 像素。

【解决方案2】：

可以用jquery获取窗口的高度

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

【讨论】：

首先你需要执行那个方法，即它的； $(window).height() 其次他不是想要宽度吗？
if ($(this).scrollTop() > 187 && $(this).width() > 780) { } i 添加了这个，它有效，但它不会将元素返回到原来的状态向后滚动时的状态.. 用于 320、480 和 780 视口

【解决方案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

【讨论】：