边界半径和Java脚本

Border Radius and Java Script

本文关键字：Java 脚本 边界      更新时间：2023-09-26

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

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

整洁多了，不是吗?

相关文章：