如何让JavaScript粘性表单代码仅在桌面端生效，移动端不执行？

核心思路是根据窗口宽度区分设备类型，仅在桌面端执行粘性逻辑，移动端重置表单CSS使其回到正常流并居中，同时处理窗口缩放/设备旋转的场景，避免样式异常。

修改后的完整代码 #

<script>
//Fixed Menu (Header or footer) v1.3.1

/**
  * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
  * TS:0002-13-013
*/

// 配置项 - 替换为你的盒子ID和目标位置
var boxToAppend = '#lp-pom-box-16';
var headerOrFooter = 'header';
// 移动端宽度阈值（可按需调整）
var mobileBreakpoint = 600;

// 桌面端粘性样式
var backgroundCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"899"};
var colorOverlayCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"auto", "border-style":"none none none none"};
var childrenCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};

// 移动端重置样式（让表单回到正常流并居中）
var mobileResetCSS = {
  "position": "static",
  "left": "auto",
  "top": "auto",
  "bottom": "auto",
  "width": "100%",
  "margin": "0 auto",
  "z-index": "auto"
};

// 处理底部定位逻辑
if (headerOrFooter === 'footer') {
  backgroundCSS["top"] = 'auto';
  backgroundCSS["bottom"] = '0px';
  colorOverlayCSS["top"] = 'auto';
  colorOverlayCSS["bottom"] = '0px';
  childrenCSS["top"] = 'auto';
  childrenCSS["bottom"] = '0px';
}

// 根据窗口宽度应用对应样式的核心函数
function applyFormStyle() {
  var $box = jQuery(boxToAppend);
  var $boxClone = jQuery('.sticky-form-clone');
  var $colorOverlay = jQuery(boxToAppend + '-color-overlay');

  if (jQuery(window).width() > mobileBreakpoint) {
    // 桌面端：应用粘性样式
    if (!$boxClone.length) {
      // 首次执行时克隆元素
      $boxClone = $box.clone().addClass('sticky-form-clone');
      $boxClone.appendTo($box.parent()).css(backgroundCSS).children().remove();
      $colorOverlay.appendTo($boxClone).css(colorOverlayCSS);
    } else {
      // 窗口缩放后重新应用样式
      $boxClone.css(backgroundCSS);
      $colorOverlay.css(colorOverlayCSS);
    }
    $box.css(childrenCSS);
  } else {
    // 移动端：重置样式并清理克隆元素
    if ($boxClone.length) {
      $boxClone.remove();
    }
    $box.css(mobileResetCSS);
    $colorOverlay.css(mobileResetCSS).appendTo($box.parent());
  }
}

// 页面加载时初始化样式
jQuery(document).ready(function() {
  applyFormStyle();
});

// 窗口大小变化时自动切换样式
jQuery(window).resize(function() {
  applyFormStyle();
});
</script>

关键修改说明 #

• 断点控制：通过mobileBreakpoint定义移动端宽度阈值，默认600px，可根据需求调整。
• 移动端重置：设置position: static让表单脱离固定定位回到正常流，width:100%+margin:0 auto实现居中，重置所有固定定位相关属性。
• 窗口监听：添加resize事件监听，用户缩放窗口或旋转设备时自动切换样式。
• 克隆元素管理：给克隆的背景元素添加类名，方便后续查找和清理，避免重复克隆导致的冗余元素。

注意事项 #

1. 确保表单盒子ID#lp-pom-box-16与Unbounce编辑器中的元素ID一致。
2. 如需调整移动端表单的间距、内边距等样式，可在mobileResetCSS中添加对应属性（如padding: 10px 0）。
3. 测试时请在真实移动端设备或浏览器开发者工具的移动端模式下验证效果。

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