如何在不刷新页面的情况下通过JavaScript/jQuery动态设置#mainPart的marginTop值

问题出在你当前的代码只在页面初次加载完成时执行（$(window).load()的作用就是这个），而点击提交按钮时并不会触发这个事件，所以自然不会更新margin值。我们可以把计算和设置margin的逻辑抽出来，在需要的时候主动调用它——比如页面初始化时，以及提交按钮点击时。

具体步骤： #

1. 提取独立的设置margin函数
   把计算导航栏高度、设置#mainPart marginTop的逻辑封装成一个单独的函数，这样可以在多个场景下复用：

   function adjustMainPartMargin() {
       var navHeight = $('#main-navbar').outerHeight();
       // 这里保留你的alert用于调试，上线可以去掉
       alert("Height of main-navbar: " + navHeight);
       $('#mainPart').css({ marginTop: navHeight + 5 + 'px' });
   }
   

2. 页面初始化时执行一次
   保留页面加载完成时的调用，确保初始状态下margin值正确：

   $(window).load(function() {
       adjustMainPartMargin();
   });
   // 如果用的是jQuery的ready事件，也可以写成：
   // $(document).ready(function() {
   //     adjustMainPartMargin();
   // });
   

3. 在submit函数中调用该函数
   因为你的提交按钮绑定了AngularJS的submit(query)函数，所以需要在这个函数内部调用我们刚写的adjustMainPartMargin()，这样点击提交按钮时就会触发margin的更新：

   // 假设你的submit函数是在AngularJS控制器里定义的
   $scope.submit = function(query) {
       // 原来的submit逻辑：处理查询、输出数据等
       // ...
   
       // 调用margin调整函数
       adjustMainPartMargin();
   };
   

额外注意事项： #

• 如果你的submit函数会异步加载数据（比如请求后端接口），导致导航栏高度可能在数据加载后发生变化，那你需要把adjustMainPartMargin()放在异步操作的回调里执行，确保DOM更新完成后再计算高度：

  $scope.submit = function(query) {
      // 异步请求示例
      $http.get('/api/query', { params: { q: query } })
          .then(function(response) {
              // 处理返回的数据
              // ...
  
              // 数据加载完成后再调整margin
              adjustMainPartMargin();
          });
  };
  

• 如果你更偏向AngularJS的风格，也可以通过指令或者控制器绑定的方式来处理DOM操作，减少直接使用jQuery的情况，但上面的方案是最直接适配你现有代码的。

内容的提问来源于stack exchange，提问作者risingstar