Question

我正在尝试在用户滚动时更改汉堡包导航的设计。我觉得我已经半闭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');
            }
        });
    });

这是我正在努力实现的目标

我遇到的主要问题是分配红框的正确宽度和高度，而不重新定位导航菜单。

也可以只在600px及以下进行这些更改（如您所见，这是汉堡包菜单显示的时间）。

Answer 1

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

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

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

Answer 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 {
        ...
    }
}

这些规则仅适用于屏幕尺寸＆lt; 600px的

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

Answer 3

我也遇到过这个问题，就在我创建预加载器时＃39;我的网站的事情。无论如何，我解决问题的方法是用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'
      });
    }
  });
});

无法在滚动

3 个答案: