Javascript 边界半径与Java脚本

我有一个JS文件，当它到达页面顶部时，它使

#nav

成为一个固定元素（使浮动的nav条在不考虑滚动的情况下保持不变）。当不在页面顶部时，

#nav

在顶部有圆角（左上角和右上角的边界半径），当元素更改为“固定”时，我希望这些圆角消失。这是我的代码：

$(function() {
  // Stick #nav to the top of the window
  var nav = $('#nav');
  var navHomeY = nav.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
      var scrollTop = $w.scrollTop();
      var shouldBeFixed = scrollTop > navHomeY;
      if (shouldBeFixed && !isFixed) {
          nav.css({
              position: 'fixed',
              top: 0,
          });
          isFixed = true;
      }
      else if (!shouldBeFixed && isFixed)
      {
          nav.css({
              position: 'static'
          });
          isFixed = false;
      }
  });
});

这不起作用：

$(function() {
  // Stick #nav to the top of the window
  var nav = $('#nav');
  var navHomeY = nav.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
      var scrollTop = $w.scrollTop();
      var shouldBeFixed = scrollTop > navHomeY;
      if (shouldBeFixed && !isFixed) {
          nav.css({
              position: 'fixed',
              top: 0,
-webkit-border-top-left-radius: 0px,
-webkit-border-top-right-radius: 0px,
-moz-border-radius-topleft: 0px,
-moz-border-radius-topright: 0px,
border-top-left-radius: 0px,
border-top-right-radius: 0px
          });
          isFixed = true;
      }
      else if (!shouldBeFixed && isFixed)
      {
          nav.css({
              position: 'static'
          });
          isFixed = false;
      }
  });
});

---

如何从我的JS中编辑#nav的边界半径值？

请尽最大努力将CSS与JS分开。我建议为元素的“固定”版本创建一个单独的类，其中包含所有额外的CSS，然后根据需要删除并添加该类

CSS:

#nav.fixed{
  position: fixed;
  top: 0;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

$(function() {
  // Stick #nav to the top of the window
  var nav = $('#nav');
  var navHomeY = nav.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
      var scrollTop = $w.scrollTop();
      var shouldBeFixed = scrollTop > navHomeY;
      if (shouldBeFixed && !isFixed) {
          nav.addClass("fixed")
          isFixed = true;
      }
      else if (!shouldBeFixed && isFixed)
      {
          nav.removeClass("fixed")
          isFixed = false;
      }
  });
});

JS:

#nav.fixed{
  position: fixed;
  top: 0;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

$(function() {
  // Stick #nav to the top of the window
  var nav = $('#nav');
  var navHomeY = nav.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
      var scrollTop = $w.scrollTop();
      var shouldBeFixed = scrollTop > navHomeY;
      if (shouldBeFixed && !isFixed) {
          nav.addClass("fixed")
          isFixed = true;
      }
      else if (!shouldBeFixed && isFixed)
      {
          nav.removeClass("fixed")
          isFixed = false;
      }
  });
});

---

要整洁得多，不是吗？

is-webkit边框左上角半径：0px，调试时是否被击中？