0

我有一个 JS 文件，#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 的边框半径值？

4

1 回答 1

2

尽量让你的 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;
}

JS：

$(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;
      }
  });
});

更整洁，不是吗？

于 2013-04-13T22:56:42.610 回答