Question

如何修复提交按钮表单，以使其他字段滚动而不是提交按钮？我使用的位置是：粘性，但其他字段位于“提交”按钮的背景中。

Answer 1

您可以分为两个部分。

<body>
    <div class="top-container">
        //Some Data
    </div>

    <div class="header" id="myHeader">
        <button onClick = {alert("Submit")}>Click</button>
    </div>

    <div class="content">
        //More Data
    </div>
</body>

在componentDidMount中定义脚本

window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

我认为这会对您有所帮助，但有关更多信息，您可以参考here

请告诉我是否可行。编码愉快。：）

Answer 2

使用position: fixed;

.submit{
position: fixed;
margin-left: 250px;
}

<form>
<input type="submit" value="Submit" class="submit">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  
  <textarea style="height:500px"></textarea>
</form>

如何在表单上创建粘性提交按钮？

2 个答案: