Question

我是CSS的新手，我有一个带有公司徽标的粘性标题菜单，其中菜单和图像在用户向下滚动时缩小到48像素高。我用来缩小徽标的代码如下，但是如何更改徽标图像并将.sticky包含在徽标图像中而不更改所有图像，就像我在img {}下面所做的那样？

   img {
        height: 100%;
        width: 50%;
        margin: 0;
        padding: 0;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    img.sticky {
        height: 100%;
        width: 25%;
        float: left;
        margin-left: 50px;
    }

Answer 1

我对你的问题感到有点困惑。您想将粘性类仅应用于一个img吗？如果是这样，您只需创建粘性类，并将其与img标记解除关联即可实现此目的。

所以创建一个CSS类：

.sticky {
   height: 100%;
   width: 25%;
   float: left;
   margin-left: 50px;
}

然后使用一些jQuery在滚动事件触发时将该类添加到所需的图像：

$( window ).scroll(function() {
   $('img:pseudo-selector').addClass("sticky");
});

OR

根据元素的位置，您可以使用不同类型的伪类完成相同的任务：CodePen

请参阅Pseudo-Classes

我不知道这是不是你正在寻找的东西，但也许这可能会有所帮助。

css样式，改变一个图像样式，而不是所有

1 个答案: