Question

我有一个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的边界半径值？

Answer 1

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

多整洁，没有？

边界半径和Javascript

1 个答案: