在滚动时分配背景颜色时遇到问题

Posted 2023-03-06

【中文标题】在滚动时分配背景颜色时遇到问题

【英文标题】：Trouble assigning background color on scroll

【发布时间】：2016-07-22 20:33:25

【问题描述】：

我正在尝试在用户滚动时更改汉堡导航的设计。我觉得我已经接近了https://jsfiddle.net/g95kk7yh/6/

$(document).ready(function()       
        var scroll_pos = 0;
        $(document).scroll(function()  
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 10) 
                $(".navigation").css('background', 'rgba(255, 0, 0, 0.5)');
                $(".navigation span").css('background', '#bdccd4');
             else 
                $(".navigation").css('background', 'transparent');
                $(".navigation span").css('background', '#fff');
            
        );
    );

这就是我想要实现的目标

我遇到的主要问题是在不重新定位整个导航菜单的情况下为红色框分配正确的宽度和高度。

也可以只在 600 像素及以下进行这些更改（您可以看到这是汉堡菜单显示时）。

【问题讨论】：

稍微注意一下：只用颜色设置background-color 或background 基本上是一样的......

检查这个 jsfiddle.net/moj7z2b4/2 让我知道它是否正常。

@7urkm3n 为什么不将其添加为答案？看起来对我来说是正确的......

非常感谢 7urkm3n ...您能否将其作为答案，以防有人提及此问题并想要解决方案。

【参考方案1】：

我使用了@potatopeelings 帖子并更改了几行并添加了。

.myClass 
  margin-right: -25px;
  width: 85px;
  height: 85px;
  background-color: rgba(255, 0, 0, 0.5);

小提琴：https://jsfiddle.net/moj7z2b4/2/

【讨论】：

好吧，确切地说，@potatopeelings 并没有真正回答 OP 的问题（至少在我写这篇文章的时候没有）；您只是使用他的方法做与 OP 相同的事情，但实际上提供了一个解决方案，所以我 +1...

@webeno 谢谢）

【参考方案2】：

这仅涵盖问题的第二部分（感谢@webeno 和@MarcusPorter 抓住了这一点）。请参阅 7urkm3n's solution 以获取涵盖问题两个部分的答案。

---

无需更改脚本中的 CSS 属性，只需添加/删除具有所需属性的类即可。

...
if(scroll_pos > 10) 
    $(".navigation").addClass('myClass')
 else 
    $(".navigation").removeClass('myClass')

...

然后用

包装你的类 CSS 规则

@media screen and (max-width: 600px) 
    .myClass 
        ...
    

    .myClass span 
        ...
    

因此这些规则仅适用于

---

小提琴 - https://jsfiddle.net/moj7z2b4/

【讨论】：

这并没有真正让它看起来像在图像上，小提琴的行为与 OP 完全一样，只是它以不同的方式接近解决方案......

...您也没有在上面的答案中谈到“仅在 600 像素及以下的位置进行这些更改”的部分，尽管您确实在小提琴中进行了更改

感谢土豆皮，这种方法可能会解决我的 600px 宽度问题，但从我到目前为止所玩的内容来看，它似乎并没有解决我成功添加红色框而不弄乱的主要问题定位导航的其余部分。我会多玩一点，让你知道我是怎么走的。

@webeno - 你说得对，我完全错过了问题的第一部分，只回复了第二部分。哎呀！但是 7urkm3n 已经填补了其余部分。耶！

@MarcusPorter - 正如 webeno 指出的那样，我完全错过了你问题的第一部分（可能被图片分散了注意力:-)）并且只回答了你问题的第二部分。很高兴您在 7urkm3n 的帮助下解决了这个问题。干杯！

【参考方案3】：

我也遇到过这个问题，那是我为我的网站创建“预加载器”的时候。无论如何，我解决问题的方法是将background-color 更改为backgroundColor。确保backgroundColor 不在引号中，只需像对待变量或函数等一样输入即可。

来自jQuery API Docs：

此外，jQuery 可以同样解释多词属性的 CSS 和 DOM 格式。例如，jQuery 理解并返回.css( "background-color": "#ffe", "border-left": "5px solid #ccc" ) 和.css(backgroundColor: "#ffe", borderLeft: "5px solid #ccc" ) 的正确值。请注意，对于 DOM 表示法，属性名称周围的引号是可选的，但对于 CSS 表示法，由于名称中的连字符，它们是必需的。

这段代码应该可以工作，但我还没有测试过。我把你的.css('property', 'value')改成了.css('property': 'value'）；

$(document).ready(function() 
  var scroll_pos = 0;
  $(document).scroll(function() 
    scroll_pos = $(this).scrollTop();
    if (scroll_pos > 10) 
      $(".navigation").css(
        backgroundColor: 'rgba(255, 0, 0, 0.5)'
      );
      $(".navigation span").css(
        'background': '#bdccd4'
      );
     else 
      $(".navigation").css(
        backgroundColor: 'transparent'
      );
      $(".navigation span").css(
        'background': '#fff'
      );
    
  );
);

【讨论】：

从功能上讲，两者之间应该绝对没有区别......正如您的报价中所述，它只是谈到两者都可以使用的事实，即。 “jQuery 理解并返回正确的值”...

感谢您提供的信息，但我认为这无关紧要:)

我建议你删除这个答案，因为它与原始问题无关，你会为自己节省几分，因为我的反对票将被删除...... ;)