1

我不确定它是否称为粘性标题，但这对你们来说可能是一个简单的问题！我确实有一个粘性标题.. 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 属性.. 为了很好地解释它，这里是更新的jsfiddle。

  1. 对于 780 以上，当您向下滚动时，标题变为红色，当您向上滚动时，它再次变为黑色（就像我想要的那样）

  2. 如果您将窗口大小重新调整到 780 以下，标题应该是灰色的。如果再次向下和向上滚动。（位置应该继承不固定）。颜色仍然应该是灰色的

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

4

3 回答 3

1

您可以使用 jquery 获取窗口的高度

if($(window).width() >= 780){
  alert("bigger")
}
于 2013-11-14T03:16:54.867 回答
1

我只想添加一个 CSS 类，并在该类上使用媒体查询来确定是否应该修复它。见小提琴。

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; }
}
于 2013-11-14T04:02:25.447 回答
0

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;
    }
}

你可以在这里看到它

于 2013-11-14T03:53:53.373 回答